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

Dexo · 17-12-2012, 13:44:06

remind4me, основная проблема на мой взгляд отсутствие собственного уникального визуального стиля блога. Всё серенькое и не запоминающееся.

Что можно изменить и доработать:

1. Логотип никак не отражает тематику (программирование).

2. Иконку RSS лучше сменить, у меня например вызывает резко негативное отношние любая иллюстрация с участием серых безликих человечков. Они уже настолько приелись на всевозможных блогах, что не знаешь куда от них деваться.

3. Стоило бы ограничиться выводом 4-6 популярных статей. 10 это перебор. Блоки популярных статей обычно воспринимаются как некая "элита", лучшие из лучших статей. Но дело в том, что элиты не может быть много. Когда человек видит заголовок "популярные статьи", а под ним простыня из 10 ссылок свойство элитности теряется и для него это просто обычные ссылки наряду с последними статьями.

4. Зачем нужен второй поиск? (от яндекса).

5. Лучше убрать QR код, сомневаюсь что им кто-то пользуется, но вот рябит в глазах от него здорово.

6. Местами не слишком удачное использование цвета. К примеру главное меню сверху выглядит не современно из-за бело-синих градиентов, это давно не круто. Даже простая плашка того же цвета, что фоновая заливка "подписки на обновления по e-mail" будет выглядеть куда лучше этого градиента.

7. Неинтересные картинки в постах. Я понимаю, что с этим иногда сложно что-то сделать, однако по возможности нужно подбирать картинки ярче, веселее и зажигательнее. Это как раз разбавило бы строгую серую атмосферу блога.

8. Форма комментариев и подписки, идущие после контента выглядят не привлекательно (слишком стандартно).

Однако есть что и похвалить:

Несмотря на скучный серый дизайн всё выглядит достаточно аккуратно и вопросов не вызывает. Как я уже сказал, не хватает только акцентов, которые добавили бы "изюма". Этим акцентом вполне может стать красивая шапка, или даже оригинальная RSS иконка (!).

Облако тегов на редкость удачно. Обычно я ярый противник тегов, но это чуть ли не единственный пример на моей памяти, когда это сделано реально удобно.

Добавлено: 17-12-2012, 14:23:16

Ilima, логотип порадовал. На редкость неплохая работа с типографикой.

Что можно исправить и доработать:

1. В слайдере остаётся много пустого места. Стоит делать описание побольше. Можете наглядно сравнить. Вверху - то, что у вас сейчас. Внизу - если добавить текста:

2. В блоке последних новостей и пресс-релизов не совсем понятна логика: почему японский мини-гидрогенератор важнее чем стадион к чемпионату мира 2018? Возможно самая последняя новость даётся в более крупном размере (больше картинка, ярче заголовок), но для пользователя это выглядит по меньшей мере странно. Учитывая к тому же что у крупной новости не отображается дата - остаётся только гадать, почему же она важнее остальных.

3. Очень интересно ведут себя ссылки в сайдбаре (ABOK и т.д.). Запомните одно правило - если ссылка перекидывает пользователя на другой сайт (пусть даже это сайт учредителя или основной домен), то пользователь больше не станет доверять вашему ресурсу и ссылкам на нём. В данном случае эти ссылки маскируются под обычное меню с категориями. Уверяю вас, что пользователя ожидает сюрприз, когда он ткнёт на ABOK и окажется на ресурсе другой тематики, хотя это и основной домен. Нужно так и написать (в заголовке например): "наши проекты". Или что-то в этом роде.

4. Заголовки нужно сделать ссылками на полную версию статьи. Почему пользователь вынужден искать глазами маленькую ссылку "Читать далее", когда он привык что заголовок на большинстве сайтов является ссылкой на статью.

5. Неудачное цветовое решение для блоков с информацией (об авторе, всевозможные вставки в статьях и т.д.). Сейчас они оранжево-бронзового цвета. Это разбивает воздушно-лёгкое впечатление от сайта (основной цвет сайта - светло-зеленый). Куда органичнее будет выглядеть светло-голубой или голубой цвет для этих плашек.

6. Футер хаотичен и неудобен. Стоит пересмотреть структуру. К тому же он визуально кривой из-за разной ширины колонок.

Добавлено: 17-12-2012, 15:11:29

MoJo, сайт довольно стильный. Особенно понравилось визуальное решение поиска. Вполне современно.

Что не понравилось:

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

2. Чёрный текст "Информационные технологии и новинки техники", который как видно выполняет функции тега h1 оформлен беспомощно) Он там как бедный родственник - не знает куда и зачем ему приткнуться. Если он там нужен (а как я понимаю это так) Оформите его полноценный заголовком: установите отступ сверху (это обязательно) и увеличьте кегль (хотя бы на 2pt). Цвет выглядит неестественно, потому что это абсолютно чёрный. Есть смысл задать цвет хотя бы #141414, можно светлее.

Сходная ситуация с заголовком в сайдбаре - ему очень тесно и цвет чересчур чёрный.

3. Проблема с блоками новостей слева и справа. Они просто вылитые тизеры. Стоит ли говорить, что из-за этого воспринимаются как реклама. Странно обрезанные изображения: какие-то куски клавиатур, части от мониторов. Старайтесь уместить в изображение устройство целиком. К тому же не допускайте чтоб изображение растягивалось, все пропорции должны быть соблюдены. Это может казаться неважным, но это не так.

4. Ситуация с популярными новостями как у remind4me.

5. Вот это очень странное решение:

Подозреваю что вам просто нечем было занять левый нижний угол, поэтому туда был втиснут этот самсунг. Какую функцию он там выполняет? Верно - никакой. К тому же нехило отвлекает на себя внимание.

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

6. В блоке "похожие новости" картинки должны быть одного размера. Для глаз очень неприятно смотреть на блоки разных размеров , да и текст "гуляет".

7. Много рекламы в развернутой новости. Если бы новость была большая, хотя бы 2.5-3к символов, выглядело бы нормально. Сейчас реклама мешает восприятию информации. Но в принципе, я думаю, визуальное неудобство должно окупаться монетками

Добавлено: 17-12-2012, 15:13:42

Ах да, забыл - favicon никуда не годится, очевидно что 4 буквы туда не влезают. Лучше обыграть одну или две, используя при этом только красный и чёрный цвета.

remind4me · 17-12-2012, 15:22:10

Dexo, огромное спасибо за отчет!
Особенно за блок "Что можно изменить и доработать"!!!

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

С дизайном (оформлением) и картинками у меня проблема... ну не умею я рисовать, но постараюсь подобрать что-то получше и более подходящее.
Наверно до НГ не получится, работы много, но все же в ближайшее время обязательно займусь улучшением-обновлением.

С меня Вам Карма +1 и Ваш голос: +1 (в первый пост)

Dexo · 18-12-2012, 21:11:57

irbis90, По первому сайту (kazan-guide.ru):

Что хорошо:

Достаточно яркая шапка, неплохой логотип. Красивые подложки у заголовков в сайдбаре.

Что можно доработать:

1. Обратите внимание на слайдер. Очень неаккуратно оформлен текст, он попросту вылезает из своих блоков. Впечатление это портит.

Как вариант можете оставить только заголовки, аккуратно расположив их на одинаковом расстоянии друг от друга.

2. Заголовки постов-анонсов никак не реагируют на наведение курсора. Вообще ссылки должны быть подчёркнуты, или на крайний случай явно говорить всем своим видом, что это ссылка. У вас же заголовки на ссылки совсем не похожи, так сделайте хотя бы эффект высветления при наведении курсора.

3. Зачем нужна маленькая зелёная иконка со стрелочкой в блоке с описанием сайта? Она же не выполняет никакой функции, лишь зря отвлекает на себя внимание.

4. В сайдбаре в рaзделе "популярное" не всегда удачно выводится количество комментариев.

5. В постах есть смысл дать возможность просмотреть полную версию фoтографии нажатием на неё. Можно реализовать с помощью jQuery. Фотографии действительно хорошие, а рассмотреть не получается из-за маленького размера. И здесь же ещё одно замечание по поводу водяных знаков - что же вы так боитесь кражи своих картинок?) Огромный оранжевый водяной знак не красит изображение. Скорее наоборот - он слишком контрастен и забирает всё внимание на себя, в то время как посетитель должен любоваться фoтографией. А на некоторых изображениях аж по 2 водяных знака. Вообще есть правило хорошего тона при установке водяного знака - он не должен мешать восприятию изображения, в идеале это должна быть неброская полупрозрачная надпись или логотип, расположенный вертикально (горизонтально расположенный текст автоматически прочитывается, т.е. отвлекает внимание).

В целом сайт оставил приятное впечатление - цвета гармоничны, текст читается хорошо, информация интересная.

Теперь второй сайт (http://albom-monet-msk.ru/).

Здесь всё далеко не так безоблачно. Давайте по порядку.

Что нужно изменить:

1. Отвратительно оформлены контакты (к тому же по-русски это называется "контактная информация"). Чем мотивировано использование шрифта 4 разных кеглей и 2 начертаний в 4 строчках текста? Это создаёт катастрофическое количество визуального мусора, да и воспринимать это крайне тяжело. В подобных случаях следует использовать максимум 2 кегля и 2 начертания (обычное и жирное, к примеру). Это что касается самого блока с телефоном и мейлом. Но в этом же блоке контактных данных находится ещё и спецпреложение, которое оформлено ещё отвратительней.

А теперь посчитаем. Итого: небольшой блок контактной информации набран 2 разными шрифтами (!), 5 кеглями и 3 начертаниями (обычный, жирный, капс). Жесть. Я уже не говорю про огромные безвкусные кнопки разных размеров, которые тут вообще не к месту. И ещё одно - избегайте лексических конструкций в духе "ВСЕГО 500 РУБЛЕЙ!!!". Это отпугивает адекватных клиентов. Хотите использовать знак восклицания? Оставьте один, на кой хрен из здесь аж 3 штуки? К тому же набор капс-локом всегда проигрывает обычному тексту с заглавной буквы (исключение могут составлять заголовки, и то далеко не всегда).

Ну и последняя проблема в этом месте: выравнивание. У блока с телефоном и у блока с акцией разные отступы, нужно привести их к единому знаменателю:

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

По поводу спецпредложения (акции): я бы вынес её в другое место, уменьшил раза в 3 кнопку, выделил заголовок (например красным цветом и кеглем на порядок больше основного набора) и набрал бы весь остальной текст построчно с заглавном буквы, т.е.:

Специальное предложение:
Альбом для юбилейных монет
Всего 500 рублей!
Доставка бесплатно

Движемся дальше.

2. Маленькие непривлекательные фoтографии и огромные кнопки - это минус. Фотографии должны быть качественными, чтоб на товаре хотелось задержать взгляд.

3. Какую роль в заголовках выполняет знак "#"?

4. Блок "последнее" и "популярное" - неудобочитаемая простыня, уменьшайте количество отображаемых товаров хотя бы в 2 раза.

5. Так тексты набирать нельзя:

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

6. Странная компоновка меню. Страница "о нас" должна быть в самом конце, т.к. это наименее значимая информация, у вас же ссылка на страницу "о нас" красуется на само видном месте. Статьи тоже разместите ближе к концу, учитывая что информация там подаётся неудобно. И кстати, почему я не могу скажем прочитать статью и тут же сделать заказ этой монеты?

7. В подобных случаях вообще не понятно какой заголовок к какой иллюстрации относится:

8. Ну и в целом сайт выглядит даже не минималистично, а скорее аскетично. Немного оформительских элементов, или хотя бы внятный логотип точно не повредили бы.

Добавлено: 18-12-2012, 22:28:47

Rissen, итак, поехали.

1. Сразу же непонятки с позиционированием сайта. Что гласит title: "Крым Ялта отдых цены 2012, аренда в Ялте недорого". Ага, сайт продаёт услуги (аренда). Но позвольте, что мы видим в шапке:

Информационный портал? С первого же знакомства с сайтом вы вводите своих посетителей в заблуждение. И это на мой взгляд сейчас самая большая ошибка. Что ожидает увидеть человек, придя по запросу "аренда в Ялте", или "Ялта 2012 недорого". Верно - конкретную информацию: что, почём и на каких условиях. Но что видит этот самый пользователь зайдя на ваш сайт? "Информационный портал отдых в Ялте". Какие ассоциации? Я например сразу подумаю что здесь должны быть статьи про отдых в Ялте, что можно посмотреть, куда сходить, какие существуют экскурсии и т.д. Что подумает пользователь? Верно - что он не туда попал.

С другой стороны - какая-то информация о Ялте есть, но ей отведен скромный блок "разное" в самом конце сайдбара, разглядеть который можно только если специально искать.

Не лучше ли так и написать в шапке - "Аренда недвижимости в Ялте", к тому же иллюстрация справа так и говорит об этом.

2. Есть претензии к логотипу. Во-первых читается как "altarent". Не каждый заметит "креатив" в виде буквы Y-бокала, частично из-за того, что латинская "Y" потеряла некоторые отличительные признаки, а именно - у этой буквы не бывает такой неестественной тонкости верхних штрихов. Ну а во-вторых обратите внимание на отражение - оно неправильное. Бокал находится ближе к зрителю, чем текст (это кстати лишний раз препятствует правильному прочтению логотипа), в то время как визуально это ничем не обосновано: и надпись, и бокал одинаковой яркости и значимости. Возникает диссонанс - вроде как бокал с текстом должны быть в одной плоскости, на деле же это не так. Как должно быть? Текст и знак должны находиться на одной горизонтальной плоскости, либо убирайте отражение:

Ещё один нюанс - замечаете, как смещено вправо отражение текста?) В общем здесь дизайнер накосячил от души. Как идея логотип можно засчитать, но реализация - отвратительно.

Можно попробовать уменьшить бокал и поставить отражения как надо, но не факт что это будет хорошо выглядеть и читаться (из-за ножки бокала). Легче перерисовать заново (или подобрать другой логотип).

На самом деле может показаться что такие мелочи как отражения не важны, однако пользователь всё-равно замечает косяки и несоответствия (пусть даже бессознательно), и на общее впечатление от сайта это влияет.

3. Далее - ключевое слово дизайна вашего сайта - мало воздуха. Бедные заголовки в сайдбаре зажаты в малюсенькие плашки, сверху и снизу буквально 2-3 пикселя, сверху 5-6. Увеличьте высоту плашек, сделайте заголовки на 1-2pt больше самих ссылок.

Тоже самое относится и к главному меню.

4. Полный бардак в оформлении текстов. Ничерта не понятно. "Кpым ялта отдых 2012" - оставим это формулировку на совести seo) Беда в другом - заголовки не являются заголовками, отсюда снова путаница. Поясню:

"размещение на отдых в ялте – весь спектр предложений" - начнём с того, что заголовок начинается с заглавной буквы, это важно.

"аренда в ялте - коттеджи и квартиры" - зря сделано выравнивание по центру. Здесь явно напрашивается по левому краю. Аналогичная ситуация с заглавной буквой. Кегль никак не указывает на то, что это заголовок - увеличьте размер шрифта. Заголовки-ссылки должны быть подчёркнуты. Итого 5 ошибок в одном заголовке. Всё тоже самое справедливо для всех заголовков на вашем сайте.

"Любой каприз за ваши деньги. Выбирайте. Гулять, так гулять! " - я бы воздержался от таких штампованных рекламных фраз, увеличению доверия и дополнительной мотивации это не способствует.

И ещё:

5. На главной странице очень много текста. Вы действительно думаете, что пользователи будут всё это читать? Ладно бы текст был интересен, но по большей части это стандартный рекламный текст. И опять же - заголовки! Они нечитаемы не для человека.

"Кpым отдых в ялте цены 2012"
"отдых в ялте цены в элитном сегменте"
"отдых в ялте недорого"

Всё это заголовки для машин, они не выполняют главной функции - помогать ориентироваться в обилии текстовой информации.

6. Так делать нельзя:

Неужели вы думаете что клиенты не знаю что такое Skype и ICQ? К тому же сами контакты зачем то выравнены по правому краю. А всего-то нужно чётко указать:

ICQ - номер
Skype - ник

В сайдбаре рaздел контакты - неаккуратные иконки, лучше уж просто текстом.

7. Ну и наконец - цветовая гамма. У оранжевого цвета есть один интересный эффект. Он возбуждает, но через 2-3 минуты утомляет. И это не шутка. Получается, если пользователь не нашёл подходящий вариант за 5 минут слишком контрастный цвет (в данном случае оранжевый) начинает давить него, и он очень быстро утомляется и истощается (психологически), а значит у него появляется желание покинуть сайт. Сомневаюсь что 5 минут достаточно для того, чтоб определиться с выбором. А попробуйте провести на своём сайте к примеру час.

В целом работы очень много. Я бы советовал переделать дизайн (с учётом исправления выше обозначенных проблем. В частности, не помешает человек, умеющий оформлять текст) и подкорректировать саму концепцию сайта. Сейчас я увидел очень много текста для поисковиков, лично я не отдал бы предпочтение такому сайту. Имхо продающие сайты как никто другой должны обеспечивать максимум удобства именно пользователю, а не поисковому роботу.

irbis90 · 18-12-2012, 22:31:56

Спасибо. Интересно читать мнение другого специалиста.
По второму сайту - согласен, сделан он через жопу.

черед 2 недели обновится, и то, что вы отметили - все будет устранено

еще раз спасибо.

Dexo · 18-12-2012, 22:33:11

irbis90, на здоровье

Rissen · 19-12-2012, 00:43:48

Dexo, супер профессиональный анализ. Если честно, я и ожидал от вас услышать критику в подобном ключе. Практически под всеми замечаниями готов подписаться руками и ногами. Жаль, что анализ коснулся только главной. Но понимаю, что очередь выстроилась уже приличная, а в сутках не 48 часов ...

sate · 20-12-2012, 01:48:36

Интересно участвую http://banket-restoran.ru/

artsamateur · 20-12-2012, 02:06:32

Я то же хотел бы услышать мнение о моей студии.. Правда интресно, что о сайте скажет сторонний специалист.
Страрался максимально человечно делать, балансируя на грани сео/юзабилити
sozdanie.by

SILVER · 20-12-2012, 02:57:41

интересно что вы думает о моем сайте http://car-vet.ru/ , не помню есть ли у меня 10 сообщений

Dexo · 20-12-2012, 02:59:05

dveriraduga, сайт очень сильно морально устарел. Сейчас он выглядит как архаизм из 1995 года, когда ещё никто не знал что такое веб-дизайн.

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

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

Уберите падающий снег, в таком виде ничего кроме нервного тика он не вызывает.

Цветовая гамма никуда не годится.

Меню слева и справа меньше всего похожи на элементы навигации.

Все без исключения картинки испорчены - растянуты, деформированы, дико обрезаны, да ещё и в плохом качестве и маленьком размере.

Шрифтовая работа тоже никуда не годится...

В общем я не увидел здесь зерна, из которого можно было бы прорастить хоть что-нибудь похожее на нормальный сайт, и по-прежнему мой главный и единственный совет - обратиться к хорошему веб-дизайнеру.

Добавлено: 20-12-2012, 03:01:20

sate, artsamateur, SILVER - прочитайте условия в первом сообщении темы.