Важность удобства интерфейса в приложении: Что важнее – функционал или интерфейс? / Блог компании Prostoy business / Хабр

Что важнее – функционал или интерфейс? / Блог компании Prostoy business / Хабр

Что такое удобный интерфейс? Если набрать этот вопрос в Google, то первая появившаяся ссылка дает нам следующее определение: «Удобная система — это та система, которая позволяет своим пользователям выполнять задачи, которые они хотят выполнить». На мой взгляд определение не совсем правильное – выполнять стоящие перед тобой задачи можно и при очень неудобном интерфейсе, в особенности, если этого требует начальство. Тут уж никуда не денешься, как говорится, «мыши плакали, кололись, но продолжали есть кактус».

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

А кто эти абстрактные «пользователи», которым нужно работать с программным обеспечением? Это живые люди разного возраста, имеющие разный уровень образования, специалисты разных профессий, работающие на разных должностях. И у каждого из них есть свои собственные понятия о том, что такое удобство в работе. Несколько примеров из жизни.

Пример №1 – при переводе ДОСовской задачи под интерфейс Windows, посыпались жалобы со стороны специалистов, долгое время успешно в ней работавших. В новом программном обеспечении им стало очень неудобно работать с помощью «мыши», что естественно, ведь несколько лет для навигации по элементам они обходились четырьмя стрелками и клавишей Enter.

Пример №2 – работникам отдела маркетинга ужасно не понравилось древовидное представление информации в программе по планированию продаж. Их абсолютно не интересовали ни структурное разделение данных, ни рассчитанные промежуточные итоги по регионам, по заказчикам, по номенклатурам продукции. Единственное число, которое им необходимо было получить – это итоговый планируемый объем продаж, а «дерево» только замедляло корректировку и поиск нужной информации.

Пример № 3 – в пользовательской заявке на модернизацию программного обеспечения было предъявлено требование отображать номера контрактов, удовлетворяющих определенным критериям, красным, синим либо персиковым (!!) цветом, в зависимости от критериев.

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

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

1. Простота и минимализм. Минимум элементов на каждой форме, минимум пользовательских действий для выполнения любой функции.
2. Точность формулировок. Все заголовки экранных форм, поясняющие надписи к элементам интерфейса, надписи на кнопках, всплывающие подсказки и подсказки в строке статуса должны быть четко сформулированы и не подлежать двойственному толкованию.
3. Отображение подсказок. Помимо надписей, элементы интерфейса должны сопровождаться всплывающей подсказкой. Подсказка также должна отображаться в строке статуса. Идеальным вариантом является наличие таких подсказок, которое позволило бы работать без прочтения инструкции и обращения за разъяснениями к авторам программного обеспечения.
4. Умеренный цвет интерфейса. Каждый используемый цвет в оформлении элементов интерфейса должен нести смысловую нагрузку, наподобие знакомых каждому цветов светофора. Использование цвета «для красоты» может сбить пользователя с толку и заставить выполнить неверные действия.
5. Надежность работы функционала. Наверное, это качество нужно было ставить на первое место – ведь никакой даже сверхудобный интерфейс не поможет в случае, если ваше программное обеспечение не будет выполнять заявленные функции, либо будет выполнять их медленно. Как говорят американцы, самое главное в машине – это двигатель и тормоза.

Вообще вопрос «Что важнее – функционал или интерфейс?» становится философским, сродни знаменитому «Что появилось первым – курица или яйцо?». С момента появления первой программы он обсуждается как пользователями, так и программистами. Что важнее, насколько важнее – четкого ответа не дает никто. Хотя, почему никто. Наверняка, такие люди как Бил Гейтс и Стив Джобс четко представляют себе эту грань. И, может быть, именно поэтому их имена лидируют в списках самых богатых людей планеты, а их продукция успешно распространяется и используется во всем мире.

Интерфейс приложения — это не только красота

При  проектировании  ПО немаловажную  роль  имеет пользовательский  интерфейс приложения.  Его  важность  заключается  в  том,  что  по  интерфейсу  пользователи,  работающие  с  программой,  оценивают  ее  в  целом.

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

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

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

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

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

В итоге пользователи начинают игнорировать его и вообще полностью отказаться от него.

С учетом важности интерфейса приложений разработчики выделяют следующие основные правила разработки:

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

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

Эти статьи блога Вам должны быть интересны:

Об удобстве интерфейсов / Хабр

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

0. Введение

Хотелось бы сразу объяснить для кого пишется эта статья. Эта статья для тех, кто не первый день в дизайне, и знает хотя-бы азы подбора цветов, шрифтов, и собственно расположения их на сайте.

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

Пока же наслаждайтесь чтением.

1. Группировка элементов

Группировка элементов UI — вообще очень важная часть планирования интерфейса. От удачности комбинации элементов взаимодействия зачастую зависит, уйдёт ли пользователь с сайта или же станет его активным пользователем.

Помните, группировать элементы интерфейса нужно грамотно. Мы рассмотрим несколько способов группировки:

а) Группировка по функциям

б) По результату действия

в) Смешанный тип группировки

Сейчас мы приступим к детальному рассмотрению данных способов.

а) По функциям

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

Разбейте элементы вашего интерфейса на классы (группы, блоки — как удобнее называть) и разместите эти блоки в порядке убывания важности для пользователя. Между прочим, это не так уж легко. Проследите за тем, куда смотрит ваш глаз в первую очередь, запомните основные точки и нарисуйте ломаную прямую. Это — «линия зрения» пользователя.

Например возьмем интерфейс Google и проследим за взглядом:

Элементы, выполняющие сходные функции, нужно помещать в отдельную функциональную группу.

б) По результату от действия

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

Действия с изображениями располагаются в одной части страницы, действие с текстом — в другой.

в) Смешанный

Этот способ — крупнейшая ошибка в истории дизайна интерфейсов. Почему? Да хотя бы потому, что, глядя на такую группировку элементов, пользователь не видит логики в их расположении и покидает сайт. Это также относится и к пром. дизайну.).

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

Стремитесь использовать опыт других дизайнеров! Часто анализ интерфейсов популярных сайтов той же тематики позволяет избежать большинства ошибок в своих работах.

Пример использования смешанного типа группировки:

Портал Netz.ru и аналоги. Дизайн выглядит хорошо, но он неудобен.

2. Расположение элементов

А как же всё-таки располагать элементы, чтобы работать с сайтом было удобно каждому пользователю, даже самому неопытному?

Давайте поразмышляем, какие раздражители сильнее всего действуют на человека?

1. Звук

2. Прикосновение

3. Цвет

4. Запах

Т.к. чисто технически прикосновение и запахи на сайты не внедрены, мы рассмотрим цвет и звук.

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

Сам по себе цвет не может повлиять на удобство страницы, но его можно использовать в вспомогательных целях.

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

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

Существует прекрасная утилита для подбора удачных цветов. Color Schemer Studio + Color Pix

Теперь давайте поговорим о расположении элементов в целом и общем.

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

Даже то, что может казаться неважным дизайнеру, может оказаться важным для пользователя.

3. Деление на блоки

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

Установить важность контента можно на сайте www.crazyegg.com, поставив на несколько дней скрипт слежения за кликами ваших пользователей. Впрочем, это скорее относится к сайтам, у которых уже был старый дизайн, и вы занимаетесь его переработкой. Если вы создаёте дизайн для нового сайта, лучше попросите совет у более опытных коллег или заказчика.

Довольно часто именно они обосновывают важность того или иного блока на сайте.

После деления на блоки нам потребуется свериться с общественным мнением: обычно право большинство, а не вы.

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

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

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

Вот несколько правил, о которых неплохо бы помнить при составлении макета дизайна:

1. Не экономьте место. Поверьте — приятный глазу фон поможет хорошо разграничить блоки, при этом не раздражая пользователя. Обычному человеку нужно получить удобный инструмент для работы, а не искать элементы интерфейса в каше, потому что дизайнер решил сэкономить немного пикселей.

2. Используйте небольшие иконки. Не стоит зацикливаться только на тексте и блоках — пользователю будет не за что зацепиться при просмотре страницы. Да и своим последователям вы сильно упростите работу по редизайну (в будущем редизайн сайта будет наверняка, т.к. технологии развиваются, а дизайн устаревает). Чем же иконки помогают в редизайне? Объясню. Глаза пользователя не отличаются от глаз дизайнера. Дизайнер также выявляет принадлежность того или иного блока по его графическому исполнению, и небольшие пиктограммы помогают ему в этом. Приведу пример на рисунке ниже. Пиктограммы которые узнаваемы абсолютно без слов.

3. Используйте как можно меньше линий на сайте. Так уж устроен человеческий глаз — ему нужно довольно много пустого пространства вокруг важных элементов. Часто вокруг важных элементов дизайнеры плодят кучу второстепенных линий, финтифлюшек и прочего. Поверьте — никому это не нужно.

4. Старайтесь не использовать вложенные таблицы. Довольно часто можно встретить таблицы в таблицах, причем много раз я видел, что каждая таблица ещё и имеет видимые границы. Итог — каша в голове пользователя, неудовольствие заказчика, и как следствие, дизайнера.

5. Используйте вкладки. Вкладки — великая вещь. Другое дело, что часто дизайнеры не могут правильно их оформить. Активная вкладка должна отличаться от той, на которую наведён курсор и остальных.

Пример правильного использования вкладок показан на рисунке ниже:

Давайте рассмотрим рисунок выше.

1. Сразу видно активную вкладку: она

— того же цвета, что и блок с контентом

— приподнята над остальными

— имеет более прорисованный дизайн

— визуально больше неактивных вкладок

2. Также сразу видно неактивную вкладку: она

— отличается цветом от активной

— опущена пониже активной

— имеет более простой дизайн

— визуально меньше активной вкладки

Хотелось бы немного пояснить значение вкладок. Во вкладки, подгружающиеся без перезагрузки страницы, можно положить все второстепенные функции. Тем самым вы убиваете двух зайцев сразу — даёте пользователю возможность самому выбирать нужные ему функции и не перегружаете страницу ненужными пользователю на данный момент функциями.

4. Кнопки

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

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

в) Лучше не пользуйтесь нестандартным дизайном кнопок. Это путает пользователя, и он теряется при работе с ними. Воспользуйтесь стандартными браузерными кнопками — так вы не отпугнёте новичков, да и опытным пользователям с ними привычнее работать.

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

д) Делайте кнопки так, чтобы они отображались даже у тех пользователей, у которых отключены картинки в браузере.

5. Флажки или опции?

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

Хороший пример — проведение опроса: если несколько вариантов ответа могут быть выбраны одновременно, нужно использовать флажки. Если же нужно выбрать только один вариант, то используются опции.

6. Визуальная группировка

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

Заголовок текста на картинке слева отделён от текста, к которому относится. Это — неправильный подход. Это применимо и к формам: привязывайте наименования полей к ним самим для избежания неясностей. Посмотрите на рисунок ниже:

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

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

Каждый вспомогательный элемент на странице должен быть расположен в непосредственной близости от главенствующего над ним элемента. Не стоит заставлять пользователя искать логику в вашем расположении.

7. Стили и отступы

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

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

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

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

8. Словарь терминов

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

Принципиально дизайн — это структурные и функциональные связующие, которые превращают систему в последовательное, упорядоченное единство, рассматриваемое одинаково с двух сторон: со стороны разработчика и со стороны пользователя.

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

Также палитра (в переносном смысле) — подбор цветов, типичных для некоторой картины, для произведений определенного художника или художественной школы.

Градации — изменение одного цвета на один шаг по графической палитре.

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

На этой ноте мы можем окончить статью.

Я надеюсь, что она вам понравилась, и я постараюсь написать продолжение.

Желаю удачи в создании хороших, удобных интерфейсов.

Если у вас возникли какие-то мысли по поводу моей статьи, прошу писать мне [email protected] (именно в таком написании).

С уважением, Бирзул Ярослав.

дизайн и эргономика / Блог компании ALEE Software / Хабр

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

По имеющимся прогнозам, в течение 2011 года объем продаж планшетов существенно возрастет, а объем продаж смартфонов существенно превысит объем продаж телефонов традиционного образца. Как показывает практика, пользователи предпочитают приложения для веб-навигации, уже установленные на телефоне, специальному программному обеспечению, которое нужно специально покупать или скачивать. Что это означает? В первую очередь — то, что в настоящее время перед веб-разработчиками и дизайнерами стоит задача учета особенностей мобильных устройств. Задача, следует заметить, не самая простая (см. статью известного специалиста в области веб-дизайна Якоба Нильсена «Мобильный контент: вдвойне сложнее» — www.useit.com/alertbox/mobile-content-comprehension.html, русский перевод- itopti.livejournal.com/2578.html, а также множество примеров дизайна на сайте www.mobileawesomeness.com ).

Cпециалист по юзабилити Патрик Кокс сформулировал 10 принципов, на которых должна основываться разработка мобильных приложений и сайтов www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile). Приглашаем читателей к обсуждению; будем рады, если кто-то сможет поделиться собственным опытом проектирования интерфейсов для мобильных приложений.

1. Используйте семантическую разметку

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

Кроме того, если мобильный браузер не загружает изображений, JavaScript или CSS-стилей, сайт всегда будет отображаться должным образом и адекватно восприниматься пользователями.

Практические рекомендации:

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

используйте тэги для обозначения типа содержимого: например, em для подчеркивания или abbr для обозначения аббревиатуры. Подробный список тэгов см. здесь: www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage

2. Пользуйтесь тэгом div только для выделения больших блоков материала, связанных друг с другом. Для выделения отдельных абзацев пользуйтесь специальными тэгами: ul для составления маркированных списков, span для выделения небольших блоков содержимого.

3. Помните о том, что семантическая паутина — это способ организации содержания, к стилю не имеющий никакого отношения.

2. Четко формулируйте задачу

Мобильная версия сайта должна быть предназначена для решения ограниченного числа задач. При ее создании необходимо особенно четко формулировать цели. Если место для сайта уменьшается на 80%, то и от 80% намеченных планов также придется отказаться. Функциональность мобильной версии сайта существенно ограничена по причине небольшого размера экрана. Например, в версию сайта для большого экрана можно запросто включить такие функции, как реклама новых продуктов компании, просмотре личных сообщений, заполнение небольших контактных форм, индикация последних сообщений в Твиттере и т. п. Но для мобильной версии такой вариант не годится: разместить все это на экране смартфона вряд ли получится. Уменьшение размера элементов содержимого — тоже не выход: не будет же пользователь просматривать сайт через увеличительное стекло!

Выход один: ограничиться наиболее необходимыми функциями, чтобы для них хватило места на экране.

Пример: сжатое и ясное представление информации на сайте

(мобильная версия портала bluemountain.ca ).

Практические рекомендации:

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

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

3. Избегайте перезаполнения!

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

Пример: упрощенная и хорошо организованная горизонтальная навигация (http://m.journeys.com/).

Практические рекомендации:

1. Сведите количество изображений в мобильной версии сайта к самому необходимому минимуму.

2. Не включайте в мобильную версию сайта текстов большого объема.

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

4. Не используйте выделенного состояния!

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

Практические рекомендации:

1. Для обозначения ссылок используйте кнопки, а не подчеркивание текста.

2. Обозначайте доступ к более подробному содержимому при помощи стрелок.

3. В оформлении кнопок пользуйтесь оттенением и рельефными линиями.

4. Используйте знакомые и понятные иконки. Избегайте иконок непривычного вида для обозначения типов действий («добавить», «изменить», «назад», «вперед» и т. п.)

Пример: удачный вариант дизайна навигационных кнопок.

5. Пишите крупным шрифтом, просто и понятно

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

Практические рекомендации:

1. Мобильная версия сайта не должна включать никакой лишней информации.

2. Отбирайте тексты небольшого объема, написанные простым и понятным языком.

3. Не пользуйтесь функцией прокрутки без особой необходимости.

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

Пример: подача информации в виде кратких и емких текстовых блоков

6. Используйте элементы содержимого сайта в навигации

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

Практические рекомендации:

1. Пользуйтесь списками меню для перехода к подменю или другим экранам.

2. Проектируйте сайт как галерею экранов; применяйте творческий подход к организации прогулки посетителей по этой виртуальной галерее.

Пример: организация мобильной версии сайта как виртуальной галереи (сайт американской рок-группы Neon Trees).

7. Уделяйте внимание цветовой гамме

Экран мобильного телефона по размеру существенно меньше экрана стандартного монитора. Чтобы читать с такого экрана, нужно максимально приблизить его к глазам. Поэтому цвета мобильной версии сайта не должны быть слишком резкими.

Пример: минимум цветов и контрастность — залог удачного дизайна (http://world.g-shock.com/ ).

Практические рекомендации:

1. Не используйте без необходимости слишком яркие цвета в оформлении сайта.

2. Сайт не должен быть слишком «пестрым».

3. Используйте цветовую гамму, наиболее приятную для глаз.

4. Не забывайте о контрастах. На экране мобильного телефона контрастные цвета выглядят очень эффектно.

8. В общем стиле сайта главное — простота

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

Пример: форма для входа на мобильную версию сайта (социальная сеть для любителей пива Untapped- untappd.com/?mobile=true )

9. Обеспечьте возможность обратной связи

Браузеры для мобильных устройств поддерживают Java — воспользуйтесь этими и создайте пользователям возможность динамической обратной связи. Можно, например, показывать ход загрузки страницы с помощью анимации. Если пользователь забыл заполнить какое-либо поле, сообщайте ему об этом тотчас же. Создавайте диалоговые окна, информирующие пользователя о том, что происходит во время работы с сайтом.

Практические рекомендации:

1. При нажатии на определенную область экрана вид сайта должен изменяться (это служит подтверждением того, что нажатие действительно имело место).

2. Используйте JavaScript (к примеру JQuery или Scriptaculous) для организации полноценного диалога с пользователем.

3. Показывайте ход загрузки страницы с помощью анимации.

10. Сохраняйте пустые места

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

Пример — меню, удобное для навигации при помощи устройств с сенсорным экраном (мобильная версия портала www.charlesluck.com ).

Практические рекомендации:

1. Для обозначения ссылок используйте не подчеркивание текста, а кнопки, объекты, иконки.

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

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

Удобный интерфейс: 5 правил юзабилити

Всем привет!

За пять лет работы в мобильной разработке мы сделали 40 проектов. Кроме написания собственно кода, мы также разрабатываем дизайн приложений, а точнее UX-дизайн. А это, честно говоря, похоже на магию.

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

В этой статье мы выделили 5 основных правил, которые помогут создать добротный фундамент для интерфейса приложения.

Итак. Вот наши правила:

1. Думайте как пользователь

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

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

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

2. Ничего лишнего

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

3. Контекст использования тоже важен

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

Этот пункт может разрушить все ваши идеи насчет дизайна

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

Или приложение с кнопкой «SOS». Логично, что у пользователя не будет столько времени, сколько есть у человека, который вечерком решил повыбирать книжку в интернет-магазине.

4. Все взаимосвязанные элементы логически соединены

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

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

5. Иерархия по важности

Если элементов больше, чем один, и один из них главнее других, то разместить его лучше в левом верхнем углу. Именно там наш взгляд ищет то, с чего следует начать посещение ресурса. Привычка идет из детства — именно так нас приучили читать, ничего не поделаешь.

Дизайнеры и разработчики могут креативить, но мозг среднестатистического пользователя не откажется от привычки. И если действительность не совпадает с привычным представлением о ней — мозг взрывается. Однако не стоит путать «важное» с «главным». Важное, это то, к чему пользователь обращается, чтобы начать решать задачу — к примеру, меню. Наименее важное располагается в противоположном углу.

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

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

Резюмируем:

1. В приложении должна быть цель — та задача, которую решает пользователь
2. Нельзя отвлекать внимание от цели лишними элементами
3. Элементы располагаются так, чтобы ими было удобно пользоваться в обычном для приложения контексте
4. Связанные по смыслу элементы располагаются рядом друг с другом
5. Элементы имеют иерархию по важности и располагаются согласно этой иерархии

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

Мои правила дизайна хорошего интерфейса / Хабр

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

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Акценты и приоритеты

Каждый раз, проектируя интерфейс я задаю себе или клиенту вопрос: “Какая информация сейчас важна для конечного пользователя? Как мы распределим его внимание в конкретном случае?” Для этого в нашем вооружении есть цвет и его оттенки, размер шрифта, его интенсивность. В совокупности, правильно используя эти инструменты, мы “оставляем послание” пользователю, ведём его по нужному нам пути, концентрируя его внимание на самом важном.

Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:

Плохой пример, где дизайнер “утверждает”: важнее всего — аватарки, а с остальным как-нибудь разберётесь:

Отступы и их пропорциональность

Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.

Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:

Плохой пример, когда отступы практически базируются на генераторе случайных чисел:

Текст кнопки всегда первичнее иконки

Не забывайте, что именно текст является определяющим фактором того, какое ожидание или реакция предварительно сформируется у пользователя при виде кнопки. И лишь изображение иконки вторичным образом дополняет смысл. Изображение колокольчика с надписью “notifications” даёт нам некоторое представление о назначении этого функциона до того, как мы сделали клик. Аналогичный колокольчик без подписи в другом приложении приведёт нас к будильнику, хотя мы скорее всего будем ожидать появление экрана с уведомлениями. Я советую всегда наделять надпись бОльшим “весом” нежели иконки. Их я вообще считаю надувательством. Многие современные интерфейсы вполне способны обходиться и без них. Просто это было бы слишком скучно!

В целом хорошо:

Но можно сделать лучше:

Тоже выглядит неплохо:

И тут есть, где улучшить:

Не пытайтесь быть слишком понятными

Не все проектируемые интерфейсы обязаны быть интуитивно понятными. Существует множество сложных систем, с которыми мы обучались (!) взаимодействовать какое-то время. Возможно сейчас они кажутся нам простыми, но мы не отдаём отчёт, что были исследователями-первооткрывателями первые минуты, часы или более. И коль мы продолжаем работу внутри некоторой изначально сложной системы, видимо ничего не препятствовало нашему пути первых исследований. Скорее всего, дизайнер сделал свою работу настолько хорошо, что мы без труда освоили новую среду. Яркий пример из жизни: попытайтесь на миг представить, что вы не знаете значение математического знака “равно”. Согласитесь, эти две чёрточки — одна над другой, они совсем не кажутся интуитивно понятными. Просто когда-то в школе учитель математики обучил нас этому. Я призываю не пытаться быть понятнее, чем это требуется на минимально необходимом уровне.

В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:

А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:

Перемещение курсора забирает силы

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

Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение:

Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:

Взаимосвязи расположений или единая плоскость

Это очередной приём балансировки интерфейса. Подобие сетки, если хотите. Например, вы используете трёхколонник. Находятся ли его заголовки в одной плоскости по оси X? Или расположение иконок с кнопками. Можно ли провести мнимую ось Y и обнаружить, что и те и другие аккуратно прилегают к ней? Если ответы утвердительны, дела идут хорошо. Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.

Плохой пример с несостыковками:

Хороший пример с гармонией и соответствием:

Цвет имеет смысл

Избитое напоследок. Красное — тревога, зелёный — всё хорошо. Испокон веков для человека самое лучше восприятие текстовой информации, это чёрным по белому. Если вы используете много цветов без аргументации, вы создаёте хаос. Если вы окрашиваете элементы по смыслу, вы создаёте еще больше порядка.

Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым — означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)

Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)

Хороший пример незлоупотребления цветами:

В качестве эпилога….

Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора. Хочу напомнить, что вышеизложенные принципы в дизайне интерфейса являются основными для меня. Я всегда держу их в уме при проектировании интерфейсов. Определитесь на чьей вы стороне… Вы хотите создавать интерфейсы для дизайнеров и работать на лайки (пример — 98% работ с behance) или вы стремитесь решать проблемы пользователя (dribbble)? Кстати, по-моему отличный пример того, как закрытость сообщества позволяет сохранять фокусировку на главном предназначении интерфейсов!

Советы по созданию интерфейсов мобильных приложений

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

1. Правила интерактивного дизайна применимы всегда

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

Некоторые эксперты выделяют 5 основных принципов интерактивного дизайна:

• Дизайн, ориентированный на потребителя. Дизайн разрабатывается для конкретных пользователей. Исследования целевой группы, опросы и интервью позволят нарисовать точный портрет потребителя, составить представление о тех, кто вероятнее всего будет пользоваться разработкой. Ориентируясь на эти данные, можно создать функционал приложения, исходя из интересов и потребностей конечного пользователя.
• Юзабилити. Это представляется самоочевидным, но не будет лишним напомнить, что приложение в первую очередь должно быть удобным. Если целевая аудитория не может без каких-либо сложностей пользоваться приложением, тогда люди попросту не будут его загружать из App Store.
• Подсказки. Пример: синий подчеркнутый текст является свидетельством того, что за кликом по нему последует перенаправление в другое место. Подсказки стоит применять корректным образом, чтобы пользователям не приходилось задумываться о том, зачем, собственно, нужен определенный элемент.
• Легкость освоения. Для того, чтобы интерфейс был интуитивно понятен, при разработке простых мобильных приложений лучше использовать привычные модели функционирования (об этом речь пойдет позже). Знакомые элементы позволяют быстрее освоить приложение.
• Фидбек и время реакции. Элемент обратной связи — это возможность узнать, была ли задача выполнена или нет. Им может быть простейший звуковой сигнал или же более сложная деталь, такая как диалоговое окно. Стоит перепроверить, что фидбек реализован должным образом, а время реакции не выходит за рамки, очерченные исследователями Nielsen Norman Group.

Эти пять аспектов можно считать основой, фундаментом, на котором выстраиваются интерактивные элементы.

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

Размер экрана не единственная сложность мобильного дизайна. Важно еще и понимание пользователей. Для этого существует три тактических подхода.

• Портрет потребителя можно рассматривать как некий функциональный прообраз ожидаемого поведения аудитории. Это дает возможность узнать, чем руководствуются пользователи, принимая определенные решения в приложении.
• Пользовательские сценарии. Сценарии предоставляют важную информацию относительного действий пользователей. Благодаря сценариям создается оптимальный дизайн интерфейса, который бы помогал людям в выполнении определенных задач.
• Карты опыта. Эти карты содержат все возможные шаги пользователей в приложении. С их помощью можно понять эмоции и обстоятельства, связанные с действиями аудитории.

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

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

3. Контент и пользовательский маршрут как отправные точки UX-дизайна

Разработка дизайна и исследовательская работа часто идут параллельно. К примеру, все полученные прежде сведения могут быть использованы, чтобы быстро составить набросок пользовательского потока или маршрута пользователей в приложении. Но прежде, чем выбрать определенный маршрут, будет уместно сделать незамысловатый прототип. Прототип не обязательно должен быть детализированным, — достаточно простой схемы на листке бумаги, чтобы понять, как люди переходят от контента к действиям.

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

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

Наличие прототипа позволяет проверить на практике определенные идеи, узнать мнение пользователей о них.

4. Улучшение юзабилити за счет привычных моделей взаимодействия

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

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

Как описывается в бесплатной книге Mobile UI Design Patterns, существуют две категории моделей интерактивного дизайна, которые следует непременно применять.

• Жесты. Функционал тачскринных устройств построен на жестах (касание, свайп, двойной клик, масштабирование).
• Анимация. Анимированный видеоряд задерживает внимание на интерфейсе в то время, пока загружается контекст.

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

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

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

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

Говоря о контенте, необходимо отметить, что текст всегда должен быть понятным и легко читаться. Важные слова помещаются вначале. Также важна определенная целостность формулировок: одни и те же названия на всех страницах.

5. Дизайн для толстых пальцев

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

Вот несколько советов по созданию кнопок и других подобных элементов:

• Люди держат свои телефоны и управляют ими по-разному. Некоторые аналитики выделяют три основных способа: в одной руке и одним пальцем, двумя руками и одним пальцем, двумя руками и двумя пальцами. Планшеты пользователи тоже держат по-разному.
• Согласно исследованию MIT Touch Lab, ширина среднестатистического указательного пальца составляет 1.6-2 см, или 45-57 пикселей, что больше тех данных, которые сообщаются в большинстве пособий. К примеру, Apple рекомендует придерживаться 44 пикселей, однако это не всегда уместно. Если кнопка слишком большая, пользователи могут и не понять, что это кнопка действия. Но, как бы то ни было, следует принимать в расчет размеры пальцев и способы взаимодействия с приложением.

6. Тренды веб-дизайна: градиенты и тени пока еще рано списывать со счетов          

Эти элементы возвращаются, достаточно взглянуть на экземпляры разработанного Google Material Design. Есть мнение, что тени помогают мозгу понять устройство интерфейса, и, видимо, по этой причине тени повсеместно присутствовали в эпоху повсеместного распространения скевоморфизма.

Тени не будут лишними в кнопках, переключателях и прочих визуальных элементах.

Благодаря теням и даже градиентам UI смотрится естественнее, эти детали можно использовать для создания 3D-кнопок и форм ввода.

7. Базовый принцип простого дизайна: устранить беспорядок

И хотя миф об эффективности правила трех кликов в веб-дизайне уже давно развенчан, это правило, тем не менее, может оказаться достаточно эффективным применительно к приложениям. В идеале пользователь должен выполнять задачи быстро и за ограниченное количество шагов. Гендиректор Yahoo Марисса Майер советует дизайнерам придерживаться правила «двух нажатий». По ее словам, «если в приложении недостаточно двух нажатий, чтобы сделать все необходимое, значит этому приложению необходим редизайн». «В Yahoo Flickr это присутствует повсеместно: открыв экран, вы можете выбирать изображения, просматривать альбомы, группы, устанавливать уведомления, выполнять другие действия — и все это с помощью только лишь двух кликов».

Стоит озаботиться объемом действий, которые приходится выполнять пользователя. Чем меньше им придется думать, тем выше вероятность, что приложение ожидает успех.

Важность юзабилити в мобильных приложениях

Мобильные приложения становятся все больше и больше, что действительно неудивительно: сейчас в мире насчитывается более четырех миллиардов активных смартфонов. Более того, ожидается, что к 2020 году это число превысит 6,5 млрд устройств такого типа, что составляет 80% населения мира.

Каждый день в Google Play Store и Apple App Store появляется несколько новых приложений. Однако многие приложения никогда не достигают желаемого успеха, и одна из основных причин этого — удобство использования в мобильных приложениях: пользователям нужны интуитивно понятные параметры, и эта гибкость интерфейса напрямую связана с дизайном.

Пользователи ищут легкости в использовании технологий. То есть разработка удобного интерфейса — это первый шаг к хорошему признанию. Чтобы этот опыт был действительно замечательным для пользователей, все должно работать безупречно. Вот несколько советов, которые помогут вам в этом.

Объективность

Прямолинейность и эффективность — это минимум, которого вы ожидаете от программного обеспечения. Следовательно, важно убедиться, что приложение хорошо справляется с задачей, для которой оно было разработано.Хорошим примером является Google Chrome: его панель навигации, интегрированная с поисковой системой, — это единственный элемент, который мы видим, открывая его — минималистичный и функциональный.

Макет

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

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

Отзывчивость и интерактивность

Открывать приложение очень неприятно, оно не помещается на экране устройства. Старайтесь всегда оптимизировать его для основных моделей, доступных на рынке (особенно в случае Android). В идеале поддерживает как горизонтальный, так и вертикальный экран.Хотя некоторые экраны приложений лучше смотрятся по горизонтали, вертикальный вариант может быть весьма полезен, когда вам нужно использовать телефон только одной рукой.

Специфика

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

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

.

Почему удобство использования является самым важным при разработке сайта

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

Учтите, что если дизайнер сделает сайт с интересной концепцией, но с трудностями для навигации и понимания, то весь проект будет почти бесполезен для клиента.

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

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

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

Удобство использования — это комбинация факторов, в том числе:

• Интуитивно понятный дизайн : понимание архитектуры и навигации сайта практически без усилий
• Простота обучения : насколько быстро пользователь, который никогда раньше не видел пользовательского интерфейса, может выполнять базовые задачи
• Эффективность использования : Как быстро опытный пользователь справляется с задачами
• Запоминаемость : после посещения сайта, если пользователь может вспомнить достаточно, чтобы использовать его эффективно при будущих посещениях
• Частота и серьезность ошибок : как часто пользователи совершают ошибки при использовании системы, насколько серьезны ошибки и как пользователи восстанавливаются после ошибок
• Субъективное удовлетворение : Если пользователю нравится пользоваться системой

Почему удобство использования важно в дизайне веб-сайтов?

Простота использования при разработке веб-сайта огромна.

Источник изображения: Phi Hoang

Очевидно, что люди используют Интернет с определенной целью. Интернет-пространство — это не телепрограмма, которую можно смотреть просто так. Большую часть времени пользователи выходят в Интернет, чтобы искать информацию, общаться с другими или покупать то, что им нужно. Наша задача — убедиться, что они действительно могут это сделать.

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

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

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

Пользовательский опыт — это не то, что мы «проектируем»

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

Начнем с того, что многие дизайнеры неверно истолковывают этот термин; и они верят, что могут улучшить качество UX, изменив элементы дизайна.

Как спланировать удобство использования

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

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

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

Создание сайта

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

• Панель навигации должна быть отправной точкой. Постарайтесь расположить кнопки по важности сверху вниз или слева направо, в зависимости от дизайна вашего сайта.
• Постарайтесь быть кратким и решите, какой контент вы будете размещать на страницах, прежде чем создавать их. Удалите все страницы, которые посетителям не нужны или на которых нет интересной информации
• Меньше кликов, больше конверсий . Убедитесь, что ваши посетители не потеряются в контенте, пытаясь найти то, что они ищут, разместив на главной странице ссылки на самые важные страницы.
• Если у вас насыщенный информацией сайт, создайте несколько панелей навигации или мегаменю. Это поможет посетителю быстрее найти то, что ему интересно.

Источник изображения: amazon.com

Реклама

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

Источник изображения: nlee.ru

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

Источник изображения: thisisneat.com.au

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

Источник изображения: Бетани Хек

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

Источник изображения: betweenthebread.com

Оформление отдельных страниц

Разработка общего дизайна — это только один шаг в процессе проектирования.Многие думают, что если вам это удалось, ваша работа почти сделана. Это далеко от правды. Дизайн отдельных страниц требует большого внимания к деталям. Вот несколько советов, как сделать ваш проект лучше.

• Используйте короткие предложения (15-20 слов) и короткие абзацы (3-5 предложений). Многие люди могут быть ленивыми читателями, но они все равно являются потенциальными клиентами
• Держите статьи на одной странице. Я всегда ненавидел сайты, на которых статьи разбиты на две или более страниц. Многие администраторы делают это, чтобы получить больше рекламных показов и вымогать деньги у рекламодателей.Это просто глупо. В результате этого шага вы потеряете посетителей и рекламодателей.
• Разбивайте длинные статьи, используя описательные заголовки. Кроме того, вы должны использовать нумерованные или маркированные списки для облегчения просмотра.

Детали, которые многие дизайнеры игнорируют

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

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

Источник изображения: konform.com

• Качество дизайна сайта показатель авторитетности . Люди судят о книге по обложке, и это применимо практически к любой области.Чистый и современный дизайн сайта говорит посетителям, что вы заботитесь о своем имидже и серьезно относитесь к тому, что делаете.
• Люди обычно не прокручивают . Я знаю, что вы ожидали прямо противоположного. Вы наверняка прокручиваете, потому что вы дизайнер и привыкли видеть весь контент сайта, но у людей нет такого терпения и они не осведомлены о технологиях и о том, как веб-сайты выглядят и работают. Это означает, что вы должны поместить важные элементы в верхнюю часть страницы, чтобы обеспечить лучшую конверсию.Конечно, эта идея вызывает огромные споры за или против идеи «верхнего фолда». Решайте сами, но обязательно проверяйте исследования, проведенные по этому вопросу, а не только мнения.
• Пробелы важны . Есть тенденция размещать на странице как можно больше контента, но это только приведет к неприятным последствиям. Больше контента приводит к загромождению дизайна, что затрудняет поиск посетителями того, что они ищут. Это именно то, чего вы боитесь. Подробнее о пустом пространстве и примерах.

Источник изображения: space10.io

Разработка точных объективов

Источник изображения: sgd.com.au

У вас должна быть четкая цель для создания веб-сайта: зачем людям его посещать? Какова была бы их цель?

Подумайте об этом и соответствующим образом организуйте контент. Забудьте об эгоизме и личных приоритетах и ​​настройте стиль в соответствии с ожиданиями пользователей. Например, обеспечить уверенность, скорость и удобство; и последовательно предоставляйте информацию о своем бренде.

Успешный дизайн — полезный дизайн

Источник изображения: trefectamobility.com

Красота исходит изнутри. По крайней мере, так говорят некоторые дизайнеры! По их мнению, красота носит поверхностный характер; и его мощность очень ограничена. Что действительно важно, так это содержание веб-сайта, в то время как внешний вид никогда не выходит за пределы самой поверхности.

Вам решать, доверять ли этому. Мы бы сказали, что веб-сайты — это, в конце концов, виртуальные продукты; и эта красота — абсолютно необходимый первый шаг для привлечения внимания к «внутреннему».Однако захватывающий вид не так уж и сложен, и пользователи не сохранят свое первоначальное очарование, если вы не сможете создать ощущение «лучшее еще впереди».

Что значит хороший дизайн?

Источник изображения: blackhouse.uk.com

При сбалансированном сочетании эстетики и удобства использования удобство использования более важно для качества вашего дизайна.

Хороший дизайн обычно выглядит красиво; и очевидно, что дизайнер много работал, чтобы этого добиться.

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

После проектирования: тестирование удобства использования?

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

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

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

Заключительные мысли

Источник изображения: doeat.com

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

Хорошая тактика, которая может помочь вам установить баланс, — это посмотреть как на удачные, так и на неудачные примеры. Мы надеемся, что ваши наблюдения позволят вам «читать между строк» ​​и понять, что действительно важно для успеха вашего сайта.

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

За человеческими предпочтениями стоит психология. Как мы уже упоминали, люди часто путают красивое с доверчивым; или некрасиво из-за бесполезности. Что это говорит нам? Это говорит нам о том, что внешность — это только один из факторов, но довольно важный.Вы можете улучшить свой UX разными способами, но ни один из них не должен подрывать важность эстетики.

Неограниченные загрузки : более 1000000 шрифтов, шаблонов InDesign, экшенов Photoshop, мокапов и ресурсов дизайна через

.

Руководство по измерению пользовательского опыта

Мы нанимали на руководящую должность UX / UI в Invesp. Из 20 понравившихся нам резюме нам предстояло провести только 10 телефонных интервью. Из 10 интервью только одно было проведено лицом к лицу.

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

Полная тишина.

Основы CRO лежат в удобстве использования. Без этого мы не сможем создавать и предлагать посетителям самые лучшие впечатления. Тем не менее, разработать и подготовить опыт работы в цифровом мире и получить больший контроль над взаимодействием с пользователем — задача не из легких.

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

Оптимизация конверсии и пользовательский интерфейс приобрели большое значение за последние пару лет. Компании нанимают экспертов в этих областях, чтобы исправить свои процессы и обеспечить полную оптимизацию и увлекательность опыта конечного пользователя. Но наем и применение стандартов — это разные вещи. По нашему собственному опыту, мы обнаруживаем, что многим компаниям нравится эта концепция и они нанимают сотрудников для улучшения, однако иногда они не желают совершать такой большой скачок, который приведет к лучшему опыту.Очень часто лучший UX и CRO означает идти вразрез с тем, что думает или хочет HIPPO.

Цифровой маркетинг обеспечивает такой широкий спектр сбора и обработки данных. При правильном использовании может помочь перевернуть компанию. Но очень часто сбор данных — это простая часть, а вот обработка, расшифровка и выработка практических идей — сложная задача. И даже процесс сбора может стать громоздким, потому что вам нужно решить, какие точки данных имеют отношение к тому, чего вы пытаетесь достичь.

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

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

Usability Framework

Источник изображения: ui-designer

Как видно из вышеприведенной структуры, «удобство использования — это многомерная концепция, которая направлена ​​в основном на достижение определенного набора целей; эффективность, действенность и удовлетворение », и без этих целей удобство использования не может быть достигнуто.

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

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

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

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

Метрики юзабилити

Источник изображения: disciullodesign

Эффективность

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

Коэффициент успешности / коэффициент завершения: — это процент пользователей, которые смогли успешно выполнить задачи.

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

Показатель успеха — один из наиболее часто используемых показателей для большинства практикующих врачей, при этом 79% из них сообщили, что использовали показатель успеха в качестве первого показателя, который следует учитывать для простоты использования и во время сбора и интерпретации данных.

«Показатель успешности можно измерить, присвоив пользователям двоичное значение 0 и 1; где 1 присваивается тем, кто успешно выполнил задачу, а 0 — тем, кто ее не выполняет ».

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

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

Принимая во внимание, что они успешно выполнили некоторые шаги в задаче, как бы вы оценили то, что они сделали, как оценщик?

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

Рассмотрим, например, что ваша задача пользователя — заказать маме коробку темных шоколадных конфет с открыткой на День матери.

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

Однако все не так просто, есть другие соображения:

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

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

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

Тот факт, что не существует постоянного правила, когда дело доходит до оценки ваших пользователей, и часто показатели успеха становятся субъективными; потому что разные оценщики не будут иметь одинаковые оценки и одинаково оценивать одинаковый процент неудач или успехов для вышеуказанных случаев.Однако для того, чтобы внедрить этот процесс, вам необходимо определить важные аспекты задачи и то, какой балл вы бы присвоили каждой ее части.

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

Тем не менее, поскольку это одна из общих областей, обычно используемых маркетологами и дизайнерами, чтобы увидеть общую картину того, насколько хорошо их система работает на уровне пользовательского опыта, это не меняет того факта, что оно остается субъективным.

2. Число ошибок

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

Источник изображения: Invesp

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

Обычно любые пользователи любой интерактивной системы могут совершать ошибки, где 2 из каждых 3 пользователей ошибаются, и в любом случае не существует такой вещи, как «идеальная» система. Причина использования этой метрики заключается не в устранении ошибок, а в уменьшении их количества в системе.

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

3. Эффективность, основанная на времени

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

Источник изображения: stock.adobe

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

Рассмотрим, например, что у нас есть 3 разных пользователя, выполняющих одну и ту же задачу, из которых 2 удалось успешно завершить ее за значительное время — 2,3 секунды соответственно, в то время как третий пользователь занял 7 секунд и никогда не завершил задачу.

Теперь, когда мы знаем, что количество задач равно N = 1, а количество наших пользователей на самом деле R = 3, и мы также знаем время, потраченное каждым из них, становится легко определить значение нашего времени: Основанная эффективность.

N = Количество задач (в данном случае N = 1)

R = Количество пользователей (в данном случае R = 3)

Nij = Результат выполнения задачи i пользователем j; если пользователь успешно завершил задачу, то Nij = 1, если нет, то Nij = 0

Tij = время, затраченное пользователем j на выполнение задачи i.Если задача не выполнена успешно, то измеряется время до момента выхода пользователя из задачи

Используя уравнение эффективности на основе времени, мы получаем что-то вроде этого:

Пользователь 1: Nij = 1 и Tij = 2
Пользователь 2: Nij = 1 и Tij = 3
Пользователь 3: Nij = 0 и Tij = 7

Эффективность, основанная на времени = (1/2 + 1/3 + 0/7) / 1 * 3

= 0,71 целей / сек

4. Общая относительная эффективность

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

Предположим, у нас есть 2 пользователя, каждый из которых должен выполнять разные задачи.

Первый пользователь успешно выполнил задачу (1), но не смог выполнить задачу (2). В то время как второй пользователь не смог выполнить задачу (1), но успешно выполнил задачу (2).

В этом случае общий КПД можно рассчитать следующим образом:

Общая относительная эффективность = E = ((1 * 1 + 1 * 1) / (2 * 2)) * 100% = 50%

5.Публикация удовлетворенности заданием

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

Обычно эти задачи состоят из 5 вопросов, и идея, стоящая за ними, дает вашим пользователям возможность оценить удобство использования вашей системы.

6. Удовлетворенность уровня задачи

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

Источник изображения: Smiley Scale

Метод Word также используется для измерения уровня удовлетворенности пользователя путем перечисления ряда положительных и отрицательных коннотаций, выделенных зеленым и красным соответственно. Как показано на графике ниже.

Источник изображения: ui-designer

Заключение

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

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

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

.

Важность веб-удобства | Small Business

Согласно статистике, собранной Ассоциацией стандартов веб-сайтов, посетители остаются на веб-странице примерно 10 секунд, прежде чем принять решение уйти или остаться. Для веб-сайтов малого бизнеса создание и поддержание положительного пользовательского опыта имеет решающее значение для удержания клиентов. Юзабилити в Интернете позволяет оценить качество взаимодействия посетителей с вашим сайтом. Применение определенных принципов удобства использования может помочь вам подготовить веб-контент, который будет полезным, интересным и подходящим для вашей целевой аудитории, а также поможет бороться с неудовлетворенностью пользователей.

Установление доверия

Содержание и дизайн вашего веб-сайта должны быть привлекательными, точными и свежими, чтобы вызывать доверие. Многие факторы играют роль в установлении доверия, включая использование правильной грамматики и орфографии, правдивость и не вводящие в заблуждение клиентов. Кроме того, шрифты, которые вы используете, передадут тон присутствия вашего малого бизнеса в Интернете. Например, финансовые учреждения могут полагаться на такие шрифты, как Times New Roman и Arial, в отличие от более повседневных Comic Sans и Matisse.

Укрепление доверия

Из-за уровня риска, связанного с взаимодействием через Интернет, доверие сильно влияет на решение посетителя веб-сайта вступить в интерактивные отношения с вашим малым бизнесом. Эстетика, безусловно, играет роль в формировании первого впечатления, но сообщения об ошибках и неработающие ссылки тоже имеют значение. Отображение достаточного количества контактной информации помогает укрепить доверие, поскольку отсутствие номера телефона или адреса может заставить потенциальных клиентов неохотно делиться личной информацией.Кроме того, плохой брендинг и неполное раскрытие аспектов конфиденциальности и безопасности онлайн-отношений могут подорвать доверие.

Дизайн, ориентированный на пользователя

Независимо от того, какое художественное направление вы выберете для своего сайта, его дизайн должен учитывать конечного пользователя. Простота навигации является основным компонентом хорошего веб-дизайна и включает в себя статические ссылки или меню, которые остаются в верхней части каждой страницы, также известные как «верхняя часть страницы». Роберт Проктор и Ким-Фуонг Л. Ву пишут в «Справочнике по человеческому фактору в веб-дизайне», что посетители веб-сайтов тратят 80 процентов своего времени на сканирование верхней части каждой веб-страницы.Размер шрифта должен соответствовать целевой аудитории; например, если ваш сайт в первую очередь привлекает пожилых людей, более крупный шрифт размером от 12 до 14 пунктов облегчит чтение текста.

Удовлетворенность клиентов

Качество онлайн-отношений с вашими пользователями и то, насколько хорошо ваш веб-сайт отвечает их потребностям, напрямую влияет на вашу прибыль. Веб-тестирование юзабилити часто проводится, чтобы узнать, что пользователи испытывают на веб-сайте, а полученные отзывы используются для внедрения улучшений.Вы можете найти образцы шаблонов, вопросников и многое другое на Usability.gov, чтобы помочь вам в разработке, тестировании и поддержке ориентированного на пользователя веб-сайта (ссылка в разделе Ресурсы).

.