Анализ дизайна и юзабилити

Автор Dexo, 16-12-2012, 19:07:40

« назад - далее »

mishaneshiporuk

Как я раньше вашу тему не замечал.
http://allmyzombies.com/ - бейте, не жалейте. Знаю, что там много недостатков, но вы так четко все расписываете, хочу и себе такой анализ.
Ваш труд даром не пропадет, блог не заброшенный и продаваться не будет.


tamkor

Dexo, спасибо, что Вы тратите свое время и даете бесплатные советы!

А можно узнать, как попасть на консультацию? Я давно в темке оставляла заявку  ???


azazely85

спасибо будем править))
Купить ключи для компьютерных игр steam, uplay, origin
  •  

DexoTopic starter

Victorio, в целом неплохой, простенький сайт. Посмотрим, что можно улучшить:

1. Шапка таки слишком большая, полезной информации в ней мало, а вот места она занимает чуть ли не пол экрана. Советую сократить её хотя бы на треть (как раз нижнюю часть иллюстрации можно подрезать, эстетический вид от этого не пострадает). Хотя бы так:



2. Логотип и текст в шапке можно было оформить интереснее. По поводу логотипа - в favicon'е есть довольно неплохой знак - дом с листом в виде крыши - можно было бы использовать этот знак для логотипа.

3. В этом блоке беда с версткой:



Заголовки сливаются - это очень плохо. Первые 2 заголовка однозначно читаются как один - "Оригинальная беседка для Беседка с барбекю отдыха". Ну что это такое? Разделайте заголовки.

Блоки тоже нужно выровнять относительно друг друга, я бы предложил выравнивание по фотографиям (т.е. они должны стоять в один ряд, вне зависимости от количества текста в заголовке).

Убирайте выключку по ширине, здесь у вас она выглядит отвратительно - взгляните, какое расстояние в первом блоке в 3 строке между словами "шашлыком" и "поэтому".

"Договорная" - что договорная? Какую полезную информацию сообщает это слово, набранное огромным красным кеглем, да ещё и продублированное 3 раза? Советую убрать эти надписи, оставив лишь кнопку "подробнее". Договорная цена равносильна неизвестной цене, так что незачем акцентировать на этом внимание.

Кнопку "подробнее" лучше выровнять либо по центру, либо по правому краю.

Вот некоторые направляющие в помощь:



4. Убирайте тени для текста из меню в сайдбаре. Из-за них текст теряет чёткость и в глазах начинает рябить. От стрелочек тоже можно избавиться - это просто визуальный мусор.

5. Почему в хлебных крошках 2 стрелки, вместо одной?

6. И снова проблемы с версткой. Ссылка "ознакомиться" вышла за пределы своего блока и прилипла к заголовку следующего поста:



И так почти во всех анонсах.

7. Самое главное - из пунктов меню нужно давать ссылки на каталог, иначе я зашёл в раздел заборы - и не увидел ничего, кроме унылой статьи. А где сами заборы, которые вы продаёте - непонятно. Каталог в сайдбаре не сразу заметен (только если специально искать). лучше сделать наоборот - статьи вынести в сайдбар, а каталог в главное меню.

8. Ну и опять же, такие косяки в каталоге - просто стыдно:


Victorio

#204
Dexo, спасибо огромное! Есть над чем поработать. Сайт в процессе затачивания, поэтому было очень важно услышать ваше мнение.

Добавлено: 04-04-2013, 11:49:18


Dexo, у меня небольшой вопрос. пункт 6 и 8 скрины. Видны траблы с наслоением. Я так понял что вы смотрели в Firefox? Он же у меня все отображает без наслоения. Нет наслоения и в Опере и Хроме и IE. От чего так происходит. На работе браузеры вроде тоже коректно эти страницы отображают.


ProT

#205
Victorio, посмотрел твой сайт через FireFox, тоже обнаружил проблему с наложением постов. Через FireBug проблему выявил - у тебя сам пост находится в блоке div с классом "tab_left", а цена справа находится так же в блоке div с классом "tab_right". Оба эти блока обернуты в блок div с классом "table"...вот как раз этот оберточный блок портит всю картину, а именно у тебя там в CSS стилях прописано height=150px. Отключи этот фиксированный размер по ширине и посты автоматически встанут на свои места:)!

Добавлено: 04-04-2013, 13:45:48


Сори, ошибся... height - это высота 8)
«Когда Вселенная расширится, все в ней встанет на свои прежние места!» (с)
  •  

Victorio

ProT, спасибо, вечерком перелопачу и исправлю.

SEOspirit

Добрый день! Посмотрите, пожалуйста, сайт http://www.mosvod.ru/
  •  


ProT

Victorio, вот порядок действий, чтобы лопатить не пришлось ;D...

1. Открываешь файл style.css в текстовом редакторе (например, Notepad++)
2. В этом файле находишь идентификатор #table, выглядит он так:
#table {
    float: left;
    height: 150px;
    margin: 0 0 0 5px;
    padding: 0;
    width: 430px;
}

3. Удаляешь строчку "height: 150px", сохраняешь файл и всё.
«Когда Вселенная расширится, все в ней встанет на свои прежние места!» (с)
  •  


Victorio

ProT, про лопатить эт я загнул. CSS сам писал. Но все равно спасибо!