Все статьи

10 мелких ошибок в дизайне, которые мы по-прежнему совершаем

10 мелких ошибок в дизайне, которые мы по-прежнему совершаем (Eugen Esanu на UXplanet.org)

Даже опытным дизайнерам свойственно ошибаться. Связано ли это с личным желанием переоткрыть Америку, смелостью апробировать собственные идеи и, чего уж тут, замахнуться на Вильяма нашего Шекспира… Царь я или не царь? (с) Однако есть принципы проектирования и дизайна, нарушение которых обнаруживает непрофессионализм и поверхностность исполнителя. Огульный нигилизм, нежелание познать теорию поведения человека или законов восприятия быстро низводит звезд с пьедестала. Фееричный, но неработающий дизайн — плохой дизайн (с). Поэтому мы решили вспомнить корни вместе со Стивом Кругом, автором легендарной книги Don’t make me think («Не заставляйте меня думать»).

Выражение «хороший дизайн очевиден» (в российской интерпретации «хороший дизайн — это незаметный дизайн» — прим.переводчика) немного устарело и, как понимаете, в разные века имело разное значение. Оно относилось и к хорошей еде, и к музыке, и к архитектуре, одежде и даже философии, да много еще к чему…

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

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

Возвращение правила: «Не заставляйте меня думать» (Don’t make me think)

Стив Круг в далеком 2000 году, сразу после бума на доткомы, обозначил несколько до сих пор работающих и актуальных правил. И даже после его обновленной публикации особо ничего не поменялось. Конечно, вы можете сказать, что визуальный ряд сильно изменился, стал более современным и вообще не стоит на месте, веб-сайты и в целом цифровые продукты стали более структурированными и гибкими (никакого больше флеша!). И при этом… ничего не поменялось в базовом поведении человека. Мы всегда будем следовать принципу «Не заставляйте меня думать» в любых продуктах и услугах, с которыми взаимодействуем, будь то микроволновка, ТВ, смартфон или машина.
На каждой странице или экране сходу должна быть очевидна ее цель, причем настолько, чтобы даже среднестатистический пользователь мог сказать «А, понятно». Стив Круг.

1. Мы не читаем, мы сканируем

Причина такого беглого просмотра — в быстром поиске того, что отвечает нашим интересам. Так, я не припомню, чтобы сильно вчитывался в содержание какого-то текста или всматривался в содержание главной страницы продуктового сайта. Почему? Да потому что моя задача здесь найти искомое — сделать что-то по-быстрому и уйти. И нет особо времени или желания читать весь текст, если в этом нет необходимости. Но как создатели контента, мы по-прежнему размещаем объемные описания, думая, что это пригодится нашим клиентам. Или говорим друг другу: «это, пожалуй, добавит ему ценности». (И все-таки подробное описание очень нужно при глубокой заинтересованности в сложном продукте, где без пояснений не обойтись, например, при взятии Ипотеки. Но не с первого раза конечно. В противном случае для консультации клиент звонит в Контакт-центр или идет в офис компании, что увеличивает расходы на бизнес и уводит нас от цифрового взаимодействия. Поэтому скорее встает вопрос о «дозировании» этой информации с помощью разных приемов типа схлопывания в аккордеон, закладок, дополнительных окон и пр – прим.переводчика).


Какие у нас есть приемы для улучшения такого сканирования и схватывания сути страницы на лету?

    • Используйте заголовки. Во-первых, они сразу дают понять, о чем этот кусок текста, и насколько он интересен пользователю без глубокого вчитывания. Во-вторых, в целом помогают понять, продолжать ли просматривать материал дальше или, грубо говоря, вам вообще не сюда.
    • Параграфы должны быть короткими. Длинные ленты без параграфов сложнее читать и труднее вычленять ключевые слова, все сливается. Вместо этого попробуйте разбить текст хотя бы на два параграфа, помещающихся на страницу. Вы увидите, как ориентироваться в тексте сразу станет легче.
    • Используйте буллиты. Практически все что угодно может стать списком для оформления буллитами. Допустим, у вас есть предложение с множеством запятых. Уверен, его можно превратить в перечень тезисов с буллитами, причем желательно с приемлемым расстоянием между строчками, чтобы они не сливались. Частить со всеми подряд списками не стоит, но прием работает.
  • Выделяйте ключевые термины и определения. Большинство тех, кто сканирует ваш материал ищет какие-то ключевые слова или фразы. Самое простое — выделить их жирным шрифтом, так их будет проще найти. И опять, же не злоупотребляйте выделениями, чтобы не превратить страницу визуально в тяжёлый и громоздкий текст.

2. Создавайте явные зрительные иерархии

Следующим важным правилом, упрощающим сканирование и восприятие информации, является отображение соответствующей визуальной иерархии объектов. Мы должны явно дать понять, что любое отображение на странице несет в себе отношение этого объекта с другими объектами – либо доминирующее, либо подчиненное. Это позволяет соотнести друг с другом темы и логические блоки, кто к кому и как относится. Вот пара принципов, которым мы рекомендуем следовать:

  • Чем важнее объект или надпись, тем заметнее они должны быть. За счет чего? Наиболее важные части материала либо больше по размеру, либо жирнее, контрастнее и имеют заметно отличающийся цвет.
  • Объекты, связанные между собой логически, так же связанно должны быть представлены на экране (принцип группировки). Это достигается за счет группирования и отображения их в едином стиле или хотя бы под одним заголовком.

3. Не изобретайте колесо

Человечество всегда стремится к чему-то новому и необычному, и в этом стремлении мы тоже не меняемся. А в итоге сталкиваемся с таким огромным количеством приложений в маркете, что каждый из них отнимает много нашего времени на освоение. Каждое из них норовит «по-своему» выстроить сценарий взаимодействия с нами, удивить сложностью или оригинальностью, которые в итоге оборачиваются усилиями по их освоению и запоминанию. В какой-то момент наш мозг восстает: «О, черт, опять надо разбираться и вникать?!».

Прежде, чем мы пойдем дальше, мне важно сказать вам одну вещь:

Как дизайнеры, которых в какой-то момент просят придумать что-то новое, мы начинаем заново придумывать колесо. Потому что делать то, что делают все вокруг — «не круто», воспринимается как дурной тон и непрофессионально («Удивите меня!» – лозунг в голове каждого «уважающего» себя дизайнера – прим.переводчика) Нас же наняли, что бы сделать что-то особенное. Не говоря уже о том, что в индустрии дизайна редко награждают и премируют за создание чего-либо «супер-обычного».

«Прежде чем заново изобретать колесо, вы должны понять ценность вложенных затрат (время, усилия, знания), которые пойдут на революционное и инновационное решение».

4. Пользовательские инструкции «must die»

Наша задача – сделать интерфейс понятным и очевидным. Если ясности сходу достичь сложно, то прибегайте хотя бы к самоочевидным приемам. Самое важное, что вы должны знать о любых инструкциях к интерфейсу — это то, то их никто не читает. Поэтому наша задача — сделать интерфейс без дополнительных пояснений. Но когда они все-таки необходимы, сделать их максимально лаконичными, убрав все лишнее (но даже и их, если честно, читать никто не будет). Так что зря стараетесь.

Если в интерфейсе не удается достичь ясности, постарайтесь достичь хотя бы самоочевидности.

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

1_TIujSjdfEJN1ZaW1kqxOPg

5. Нам всё равно как работает Ваш продукт

Для большинства аудитории не свойственно знать заранее и понимать, как работает ваш продукт. И не потому что они не прогрессивны, а просто потому что не вникают и не думают постоянно о вас (да, представьте!) Но как только они освоят ваш продукт, на другой уже не пересядут.

Возьмем Apple Air Pods. Надо признать, у них самое худшее соотношение цены и качества звука для наушников такого уровня, мы явно переплачиваем. Но когда я смотрю, как люди обращаются с ними, становится понятна реальная причина, почему их покупают. Они не вынуждают думать, почему вдруг перестали работать. Вы даже не заметили, что они вышли на новой технологии.

Я наблюдаю, как моя мама управляется с ними, и при этом она даже не спрашивает на базе какой технологии это сделано. Она просто знает, что где бы ни достала их рядом со своим устройством, они тут же подсоединятся к нему. Это же так просто, вуаля.

1_8jnrHZclLHqmqYRRPrFX2g

6. Люди не особо вдаются в Ваши подробности, им просто некогда

Это мой любимый принцип. Мы, дизайнеры, обожаем придумывать какие-нибудь едва уловимые эффекты или добавлять невероятные подсветки. Верно? Не поверите, но вашему пользователю все равно… Даже если вы вдруг услышите, что они заметили, поверьте, им все равно. Может первый раз еще ничего, ну второй. Третий? Реально, сколько мне на это еще смотреть, пока вы не поймете: «достаточно»?

Почему так происходит? Жизнь проходит в постоянном стрессе и вызовах от окружающих нас обстоятельств, чтобы еще обращать внимание на эти приемы в виде тонировок, градиентов и прочих «пасхалок». Допустим, вы отец, и ваш ребенок кричит, потому что требует мороженого, собака лает, потому что ее кто-то позвал из открытой двери напротив, а вы в этот момент пытаетесь купить билет на экспресс, уходящий через 40 минут. В этот момент, как вы понимаете, люди не будут в восторге от ваших спецэффектов. А с другой стороны, их все-таки надо использовать, но только не в ущерб клиентскому сценарию. (добавим, что разные дизайнерские приемы добавляют шарма, не все должно быть только рациональным, но умеренным точно – прим.переводчика)

7. Не путайте фокус-группы с юзабилити-тестами

Фокус-группа – это небольшая группа людей, сидящая за одним столом и обсуждающая разные вопросы. Они делятся своим мнением о продукте, своем прошлом опыте, чувствах и реакции, которые вызывает новая концепция. Это отличный метод для понимания того, что хочет ваша аудитория (от себя отметим, что глубинные интервью «один на один» лучше, чем фокус-группы, так как позволяют раскрыть потребности клиента, исключив влияние группового лидера и необходимости публично делиться личными переживаниями – прим.переводчика).

Юзабилити-тест – больше похоже на наблюдение за человеком в процессе его взаимодействия с продуктом. В этом случае вы просите его выполнить особые задания и смотрите, на что стоит обратить внимание и скорректировать в вашей концепции. Таким образом, фокус-группы это скорее про «послушать», а юзабилити-тест – про «посмотреть».

8. Не дайте вашему личному мнению вторгнуться в процесс создания продукта

У каждого, кто когда-либо имел отношение к цифровому дизайну, наступает момент, когда он говорит: «Я тоже пользователь, поэтому тоже имею право высказаться, что здесь хорошо, а что плохо». И поэтому у нас самих тоже формируется стойкое понимание, что нам нравится, а что нет.

Нам нравится пользоваться продуктом_______ (вставить пропущенное слово) или мы уверены, что ________ несет боль. А когда мы работаем в команде, то очень сложно отследить эти мысли «на входе». В итоге мы видим целую комнату людей с очень ясным и четким пониманием, какой дизайн реально сделает этот продукт крутым. К сожалению, мы заблуждаемся, считая, что большинство пользователей похоже на нас.

9. Не задавайте неправильные вопросы

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

Важно: мы не должны задавать вопросы типа «Вам нравится это?», а стараться глубже проанализировать стратегическую суть задачи и отобразить это в дизайне.

Если же мы будем ориентироваться только на то, что нравится пользователям, мы потеряем фокус задачи и общий вектор. Юзабилити-тестирование при необходимости вскроет все «лайки» и потребности, которые требуется закрыть.

10. Когда человек пользуется вашим продуктом, он не должен тратить время на раздумывания типа…

  • Где я нахожусь?
  • Откуда мне начать?
  • Куда, черт возьми, они спрятали ________?
  • Что на этой странице самое важное?
  • Почему они это так называют?
  • Это реклама или часть страницы сайта?

Дело в том, что абсолютно любой вопрос, который возникает у пользователя в голове при использовании вашего продукта, только добавляет ему когнитивной нагрузки. Это отвлекает наше внимание от более важных вопросов «Зачем я здесь?» и «Что мне надо сделать?». Возьмите за правило: люди не в восторге от разгадывания пазлов, когда им надо просто понять, кликабельна ли эта кнопка или нет.

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

. . .

Мы будем признательны вам, если в комментариях ниже вы расширите свои примеры дизайнерских ошибок, которые ежедневно встречаются в приложениях или веб-сайтах. Это хороший повод поделиться знаниями «как не надо делать» с широкой аудиторией. Статья была написана на основе обновленной версии Стива Круга «Не заставляйте меня думать».

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

Тэги

Поделиться статьей

Поделитесь своим мнением
Ваше оценка отправлена!
Стоила ли статья потраченного времени?