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


Найдено 1471 сообщений
Cообщения с меткой

юзабилити - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Новый пользователь Вашего продукта — как ему помочь?

Суббота, 13 Августа 2016 г. 12:20 (ссылка)





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



Сможет ли пользователь быстро оценить его достоинства и остаться с Вами надолго?



В статье ниже я рассмотрю концепцию “обучения во взаимодействии” на примере абстрактной web-системы. Данный подход хорошо можно объяснить примером из современного игрового мира. Сначала вы проходите tutorial. Вам на плечи не вешают сразу килотонны обучающего материала. Вас ведут по ранней стадии игры, в нужное время выдавая подсказки. Например, при первом взаимодействии с новым объектом игры. Накапливается положительный опыт. Вы обучаетесь взаимодействовать. Рискну предположить, что скорее всего Вы считаете себя продвинутым пользователем, когда речь касается приложений. Как и большинство из них вы мгновенно жмёте на кнопку “Пропустить” / “Приступить к работе” …







На самом деле, я тоже почти всегда сразу жму на кнопку “Пропустить”. Это нормально, потому как в данный момент я не готов много запоминать. А после нажатия я иногда жалею о содяном)) И точно таким же взглядом, как девушка выше начинаю “недоумевать в экран”. Поэтому режим обучения “обо-всём-сразу” перед стартом работы с системой — слабоэффективен. К счастью, не все системы требуют обучения. Есть достаточно очевидные (airbnb), а есть и такие, с которыми сперва придётся повозиться (bitrix). Это не значит, что такая система плоха. Это значит, что она решает настолько сложные задачи, что это привело к непростому интерфейсу. Вам просто нужно потратить опередённое время, чтобы освоиться. Возможно Вы позднее поймёте, что это и “правда удобно”…



Давайте рассмотрим несколько потенциальных сценариев выдачи подсказок на примере абстрактного интерфейса web системы.







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







Пользователь видит информацию только о фильтрах. Т.к. они играют основную роль в данном разделе. Мы будем считать, что он всё прочитал, после того, как сделал первый клик по любому элементу в фильтре. Если он сделал onfocus по первой форме, значит он готов начинать работу. Считаем, что невозможно читать текст и одновременно кликнуть по элементам фильтра :) Всё-таки наконец он сделал свой первый клик. Готов! Теперь самое время показать ему первую выдачу результатов.







Альтернативный вариант описания работы с фильтрами: показать, что фоном есть контент. Вынудить к прочтению подсказки, чтобы unlock-нуть контент, взаимодействуя с фильтрами. Это можно считать наградой за действия. Достаточно агрессивный режим подсказки, требующий в 100% случаев подтверждения от пользователя (клик на “Поехали!”).







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







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







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







Видите? Мы получили подсказку ни раньше ни позже нужного нам момента. У нас есть очередное знание — в этой системе поиск как у Google :) А еще можно применить трюк “внезапного усложнения”. Нас сначала заманивают простой поисковой формой, но при вводе первых символов уже “запугивают” требованием конкретики. Возможно тут еще и выигрыш в освобождении шапки от дополнительных контролов.







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



Давайте теперь уйдём в другой раздел. Например в “Карта мира”. Вообще UX почти всех карт в наши дни идентичен. Но если в Вашей карте есть что-то особенное о чем должен знать Ваш пользователь, то самое время сейчас об этом сказать.







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







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







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







Необходимость такого подхода может объясняться необходимостью полностью захватить внимание пользователя после первого клика. Но есть и компромиссный и менее агрессивный вариант исполнения.







Попап пораждается контекстуально. Показывается связка с событием — клик. Но возможность работать с картой не пропадает. Судя по всему закрыть такой попап можно как кликом в “ОК” так и кликом в любую часть карты.



Ну и так далее для всей системы по подобной логике. Главное не упускать из внимания важную деталь: сначала событие, потом подсказка по конкретному элементу. Так вы сохраняете связующий контекст. Событием может быть как onclick, так и onhover. Второе стоит применять в случаях, когда у вас есть максимальная уверенность, что потянувшись к элементу, скорее всего пользователь кликнет. Стоит также соблюдать баланс. Заостряйте внимание подсказками только на важных деталях системы, которые помогут пользователям эффективнее достигать их целей. Любые эффекты анимации усиливают вовлечённость на фоне полностью статичного интерфейса.



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





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





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





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





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



Вывод

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

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



PS: Да и не забывайте “вешать” всплывающие тултипы про онховере на требующие этого элементы. Кто хотя бы об этом помнит, тот делает наш Мир лучше!





PPS: Я готов к сотрудничеству! Если Вы хотите улучшить свою систему, сделать её интерфейс более понятным и дружественным для пользователя — пишите в скайп creativiter, или на почту kamushken@gmail.com

Original source: habrahabr.ru.

https://habrahabr.ru/post/307674/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Комментарии (0)КомментироватьВ цитатник или сообщество
MilediFox

110 САЙТОВ ДЛЯ ХУДОЖНИКОВ, ДИЗАЙНЕРОВ И ПРОСТО ТВОРЧЕСКИХ ЛЮДЕЙ

Суббота, 30 Июля 2016 г. 14:20 (ссылка)


1. abduzeedo.com

Отличный сайт про логотипы и дизайн вообще (причем с подробными объяснениями).



2.
freelanceswitch.com

Сообщество всех внештатных дизайнеров (фрилансеров, если хотите) для работы за рубежом.



3.
free-lance.ru

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



4.
computerarts.co.uk

Международный интернет-журнал о компьютерном искусстве.



5.
everycreative.com

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



6.
davidairey.com

Сайт дизайнера Дэвида Эрейа David Airey). Здесь он делится своим опытом в сфере графического и лого дизайна.



7.
behance.net

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

Читать далее...
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Нижняя навигация

Пятница, 29 Июля 2016 г. 15:37 (ссылка)

image



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



Также, необходимо помнить, что поэтапное исправление какой-то недоработки иногда является плохой идеей. Так, например, когда TIME.com делали своё мобильное веб-приложение, они добавили выдвижную навигацию (или «меню-гамбургер»), потом добавили текст «МЕНЮ» под кнопкой открытия навигации, затем ещё и всплывающее окошко, указывающее на эту кнопку. И всё это для того, чтобы обучить пользователя взаимодействовать с приложением.







image



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



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



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



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



image



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



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



image



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



image



Если доступно больше пяти опций, используйте кнопку «ещё», вместо последнего элемента в списке. Нажатие на эту кнопку должно отображать остальные доступные действия. Под кнопку «ещё» стоит прятать наименее популярные действия.



image



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



image



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



image



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



Вступайте в группу:



UI/UX СНГ(Facebook)



UI/UX СНГ (Вконтакте)

Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/306732/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Искусство осмысленного UX-дизайна

Понедельник, 04 Июля 2016 г. 14:45 (ссылка)

image



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



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



Но как на самом деле происходит это «вовлечение»? От чего зависит заметное и ожидаемое изменение поведения клиента? Что нужно, чтобы клиенты начали с восхищением говорить о вашем продукте?







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



Потребительская нелюбовь к изменениям





«Люди терпеть не могут изменения. Им нравится постоянство», — отмечает Крис Ноддер в своей книге Evil by Design. «Для этого даже придумали модное название „предубеждение статус-кво“, то есть тенденция к тому, чтобы все оставалось практически без изменений, а любые отклонения от текущей ситуации воспринимаются как потеря». «Боязнь потери» приводит к тому, что люди переоценивают возможность потенциальных потерь, вызванных изменениями и, наоборот, недооценивают потенциальную выгоду. Они также склонны переоценивать текущую ситуацию (эффект владения).



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



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



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





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



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



image



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



· Способствуют более высокому жизненному циклу клиента



· Обеспечивают возможности для гибкой ценовой политики



· Способствуют быстрому росту



· Повышают лояльность клиента



Б. Дж. Фогг, руководитель, ученый и профессор Стэндфордского университета, где он и основал свою Лабораторию Технологии Убеждения, создал модель, состоящую из трех элементов, необходимых для эффективного изменения поведения. Эти элементы: мотивация, стимул и способность.



image



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



Как дизайн «ловит» потребителей на крючок





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



image



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



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



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



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



Заведомый восторг с концепцией микровзаимодействия





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



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



image



Объединив забавные иллюстрации с шутливыми посланиями вроде «Наступил ваш момент славы», MailChimp помогает пользователям избавиться от чрезмерной нервозности, связанной с первой e-mail рассылкой. Любое действие с интерфейсом и реакция интерфейса создают впечатление работы с понимающим инструктором, а не с приложением маркетинговой рассылки.



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



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



image



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

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

· Обратная связь помогает пользователю узнать о правилах. В игре T he Temple Run дают рекомендации, как можно избежать падения и не угодить в пасть зверя.

· Циклы/режимы предоставляют некоторые параметры (времени, пространства и т. д.) по прошествии времени. Так, Spotify делает более блеклым текст песен, которые были добавлены уже давно.

Еще более сильный восторг через осмысление



Термин «осмысленный опыт» широко используется в цифровой индустрии, однако чаще всего он применяется в отношении удобства пользования и искусственного восторга. Натан Щедроф, один из основоположников дизайна опыта, дает такое определение: «это опыт, который выходит за пределы функциональных, эмоциональных и личностных потребностей человека. Он отвечает на ключевой вопрос: „Вписывается ли это в мой мир?“ или, наоборот: „Это может быть моим миром?“ Если компания ориентирована на содержание, на смысл, то вопросы цены, качества, стимулов и решения о дизайне будут решены сами собой».



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



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



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



Если вы хотите восхитить своих клиентов, ваша первостепенная задача — научиться сопереживать, уметь поставить себя на место клиента. Конечно, необходимо обращать внимание на детали на каждом этапе пути клиента. От ознакомительного взаимодействия до веб-сайта, пробного опыта, упаковки, потока покупок и взаимодействия после продажи – характер ваших сообщений, все должно обеспечивать комплексный подход. Лучше поняв своего клиента, вы уже не будете отвечать на вопрос «Что», вы задумаетесь над тем «Почему» при разработке новых идей.



В своей книге «Невидимый компьютер», Дональд А. Норман пишет: «Я не хочу пользоваться компьютером. Я не хочу править тексты в редакторе. Я хочу написать письмо, узнать прогноз погоды, заплатить по счету или поиграть в игру. Я не хочу использовать компьютер. Я хочу выполнить какую-то задачу. Я хочу сделать что-то осмысленное и полезное для себя».



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



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



image



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



image



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



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



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



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



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



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



Вывод



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



У большинства компаний не хватает терпения. Главное здесь — это удержаться на плаву через постоянное обучение и совершенствование. Для того, чтобы получить продукт, который откликается на эмоции пользователей и в то же время повышает вовлечение клиентов и способствует изменению поведения, необходима осведомленность, полная отдача и энтузиазм.
Original source: habrahabr.ru.

https://habrahabr.ru/post/304676/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] UX-дизайн кнопки: советы по созданию, типы и состояния

Среда, 29 Июня 2016 г. 16:25 (ссылка)

Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи



image



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



Советы по созданию кнопок



Кнопки должны выглядеть как кнопки


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



image



Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 см.



image



Расположение и порядок



Разместите кнопки там, где пользователи без труда их найдут или там, где они ожидают их увидеть. Посмотрите, как в руководстве по разработке iOS советуют размещать кнопки.



image



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



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



image



Надписи



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



Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?



image



Призыв к действию (CTA)



Самые важные кнопки (особенно, если они призывают к действию) должны выглядеть как самые важные кнопки.



image



Форма кнопки



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



image



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



image



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



Типы кнопок и поведение



1. Объемная кнопка



image



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



Применение



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



Поведение



Объемные кнопки приподнимаются и заполняются цветом при нажатии.



image



Пример



Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.



image



2. Плоские кнопки



Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.



image



Применение



В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)



image



На панели инструментов



image



Расположение снизу, чтобы пользователь быстрее их нашел



image



Поведение



image



Пример



Плоская кнопка в диалоговом окне приложения на Android.



image



3. Переключатель



Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.



image



Применение



Почти все переключатели применяются в качестве кнопок Вкл\Выкл.



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



· В группе должно быть не менее трех кнопок



· На кнопках должен быть текст, иконка или и то, и другое.



image



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



image



Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».



Пример



В Apple iOS переключатели использованы в разделе «Настройки».



image



4. Контурные кнопки



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



image



Применение



Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.



image



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



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



image



Поведение



image



Пример



На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».







5. Плавающая кнопка с выпадающим меню



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



Применение



Плавающие кнопки с выпадающим меню применяются для вызова функциональных клавиш.



Поведение



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



image



Выбор типа кнопки.



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



image



image



Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?



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



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



Состояния кнопок



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



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



Нормальное состояние



Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.



image



Состояние в фокусе



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







Нажатое состояние



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



image



Неактивное состояние



Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.



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




  • · Ясность. Отображается только то, что необходимо для текущей задачи.

  • · Сохранение пространства. Это позволит вам менять управление, используя одно пространство для разных целей. Что очень удобно, если присутствует очень много элементов управления. Gmail применяет этот способ.



image



image



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




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



Контроль размещения. Пользователь понимает, где в интерфейсе размещено управление и кнопки.





image



Заключение



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



UX дизайн кнопок это узнаваемость и ясность. Думайте о сайте или приложении как о беседе, начатой занятым пользователем. Кнопка играет критически важную роль в этой беседе.
Original source: habrahabr.ru.

https://habrahabr.ru/post/304398/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Проектирование сайтов для людей с деменцией

Вторник, 28 Июня 2016 г. 10:56 (ссылка)

Статья была опубликована на smashingmagazine и была переведенна специально для Хабрахабра.



image



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



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



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



Разработка веб-сайтов для людей, страдающих от деменции, до сих пор была относительна неисследованной темой в мире веб-дизайна. Тем не менее, нам в On Our Radar пришлось столкнуться с проблемой удобства дизайна для людей с деменцией в прошлом году при создании «Дневников деменции»: проекта, который должен поощрить людей, страдающих деменцией вести аудио-дневники своей жизни, достижений и проблем, с помощью специального мобильного телефона, напечатанного на 3D-принтере. Коллекция аудио-историй выложена на сайте, их отбирают для медиа-кампаний в СМИ, или используют в службах и организациях, которые работают с людьми, страдающими деменцией.



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



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



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



Что такое деменция?



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



По некоторым оценкам, в конце 2015 года во всем мире насчитывалось около 46,8 миллиона человек, страдающих деменцией. Число людей с деменцией будет расти почти в два раза каждые 20 лет и достигнет 74,7 миллиона к 2030 году, 131,5 млн. — в 2050 г. Таких интернет-пользователей 3,3 млрд. по всему миру, и поскольку количество людей, страдающих деменцией, продолжает увеличиваться, будет расти и процент пользователей с этой болезнью.



Новые рубежи проектирования сайтов для людей с деменцией



Почему это важно?



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



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



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



Социальные сети



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



image



Томми Данн, человек с деменцией из Ливерпуля, Великобритания.



Основные особенности сайта для людей с деменцией



Содержание



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



Ключевые моменты



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



• Контент должен быть понятным и привлекающим внимание.



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



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



• Избегайте жаргона, слишком технического или научного языка.



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



Их словами



«Когда у вас деменция, довольно трудно сосредотачиваться на вещах длительный период времени, особенно если вы просто сидите там».



-Пол Хичмау



«Читать не трудно, в этом нет никакой сложности. Запомнить то, что вы прочитали – вот это уже проблема. Тяжело вспоминать прочитанные книги, даже вспомнить название книги… Иногда я беру в руки книгу, и не могу вспомнить, читал я ее или нет».



-Кит Оливер



image



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



Макет, Навигация И Графический интерфейс



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



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



Пять лет назад в исследованиях Pew Internet и American Life Project выяснилось, что пожилые пользователи, страдающие хроническими заболеваниями, чаще, чем их сверстники, принимают участие в онлайн-дискуссиях и ищут новые сообщества. Принимая во внимание тот факт, что Facebook – самая популярная социальная сеть для людей, старше 50 лет, вы, возможно, захотите максимально упростить возможность поделиться своим контентом в этой сети. Сделайте кнопки большими и заметными.



Ключевые моменты



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



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



• Не используйте меню-гамбургер, функции типа «Смотреть меню» и «Закрыть меню».



• Используйте кнопку «Home». Не полагайтесь на использование логотипа для возврата к домашней странице.



• Убедитесь, что гиперссылки четко видны.



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



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



• Вносите изменения постепенно. Если что-то работает, не меняйте этот элемент без надобности.



image



При нажатии на кнопку «Задать вопрос Элейн Стефенсон» (см. с левой стороны), ниже на том же экране что и сама история, появится окно вопроса, (см. с правой стороны), так что человек, задающий вопрос, сможет легко просмотреть оригинальную историю. (Изображения взято с: Дневники деменции)



image



Мы не использовали меню-гамбургер и попытались сделать заголовки меню максимально простыми. (Изображения взято с: Дневники деменции)



И х словами



«Я уже почти не могу отслеживать последовательность действий… я живу одна, и для меня это довольно сложная задача.»



— Агнес Хьюстон



«Приходится все упрощать. В голове все путается. Нужно делать все постепенн. Читать медленно».



— Арчи Латта



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



— Энн Макдональд



Цвета и контраст



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



К таким трудностям относятся:



· Снижение чувствительности в различении контраста (в том числе цветовой контраст, например черно-белый, контраст между объектами и фоном).



· Снижение способности улавливать движение (перемещения).



· Изменения в поле зрения (насколько хорошо вы видите объекты по краям поля зрения, глядя прямо перед собой).



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



· Изменения в реакции зрачка на свет.



· Проблемы направления или смещения взгляда.



Поэтому при выборе соотношения цвета и контраста важно следовать инструкциям Руководства по обеспечению доступности веб-контента (РДВК).



Ключевые моменты



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



· Предложенные коэффициенты РДВК для контраста — 7:1 и 4,5:1. В связи с тем, что наш сайт предназначен для людей, страдающих деменцией, мы вышли за рамки этих рекомендаций.



· Публикуйте текст без наложения на изображения.



· Используйте простой фон, который не будет отвлекать внимание пользователей.



image



1) Синий цвет темы с белым текстом: коэффициент контрастности — 7.4:1



2) Черный текст на белом фоне: коэффициент контрастности – 9,45: 1.



3) Названия каждой части расположены под изображением, и не перекрывается им. Вы можете нажать на название или на картинку, чтобы перейти к посту. (Изображение взято из: Дневники деменции)



Их словами



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



— Агнес Хьюстон



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



Текст и шрифты



Текст должен быть понятным и простым!



Sans serif – тип шрифтов с небольшими выступающими черточками (так называемыми засечками) в конце росчерка. Современный, минималистичный, широко используется в Интернете, в частности, для коротких и броских сообщений. Он не так выразителен с визуальной точки зрения, но простота буквенных форм sans serif делает его хорошо читаемым на любом устройстве.



Если сообщение, адресованное людям с деменцией, оформить с помощью sans serif, им в целом будет легче понять его. Возможность изменения размера шрифта – очень удобная функция, если, конечно, ваш бюджет позволяет ее применять.



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



Ключевые моменты



· Не используйте аббревиатуры и акронимы.



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



· Используйте шрифт sans serif. Мы используем Source Sans Pro (шрифт в открытом доступе, отлично подходит для разных пользовательских интерфейсов).



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



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



Их словами



«Если вы любите читать книги, но у вас возникают трудности, используйте Kindle – так вы можете выбрать оптимальный для себя шрифт. Это облегчает чтение».



— Джо Беннет



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



-Томми Данн



image



Пример изменения размера шрифта, (маленький), на сайте dementiadiaries.org. Функция изменения размера шрифта находится в правом верхнем углу сайта. (Изображение взято с: Дневники деменции)



image



Пример изменения размера шрифта (большой), на сайте dementiadiaries.org. Функция изменения размера шрифта находится в правом верхнем углу сайта. (Изображение взято с: Дневники деменции)



Изображения



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



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

Ключевые моменты



· Изображения должны быть актуальными, тесно связанными с текстом.



· Старайтесь избегать чрезмерно абстрактных иллюстраций.



· Убедитесь в том, что фотографии вносят что-то в основную историю, а не отвлекают от нее.



image



Отображается фото человека, пока его голос звучит на аудио. Материал сопровождается расшифровкой и соответствует рекомендациям по доступности веб-контента. (Изображение взято из: Дневники деменции)



Их словами



«Нам особенно понравились маленькие фотографии и иллюстрации, ясно объясняющие процесс; так текст гораздо проще понять».



— Кэрол Форс, жена и сиделка Криса Форса



Использование мультимедиа



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



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

Ключевые моменты



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



· Видео или аудио-контент сопровождайте, по возможности, субтитрами или расшифровкой



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



image



Звук загружается с помощью SoundCloud, но мы также используем другой аудио-плеер, он проще. (Изображение взято из: Дневники деменции)



Их словами



«Фоновые шумы… могут затруднить восприятие. У меня очень острый слух, на грани болевого порога. Почему в обществе нас «засыпают» громкими навязчивыми звуками? Просто мысли вслух. Это не значит, что мне не нравятся громкие звуки, но они мешают, когда из-за них я не могу думать и не могу их регулировать. Я могу даже отшатнуться в сторону. Звук заполоняет весь мой мозг, и я не знаю, что мне делать».



— Агнес Хьюстон



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



— Томми Данн



Личный контакт



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



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



Ключевые моменты



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



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



image



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

Их словами



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



— Кэрол Овенстоун



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



— Крис Форс



Сомневаетесь – спросите link



Это, пожалуй, самое главное.



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



Ключевые моменты



· Включайте в работу над проектированием людей, страдающих деменцией.



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



· Не делайте предположений о поведении и возможностях пользователя. Попробуйте найти более приемлемое решение.



Их словами



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



— Энн Макдональд



Выводы



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



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

Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/304256/

Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

10 лайфхаков для браузера Vivaldi

Четверг, 17 Июня 2016 г. 01:05 (ссылка)

Всем привет!



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



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



1. «Босс-кнопка»



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



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









2. Сортировка закладок



Мы любим закладки. Как правило, у каждого из нас имеется неслабый багаж «нажитого непосильным трудом» за многие годы работы в сети. Одна беда: время от времени их приходится сортировать, чтобы время поиска нужной закладки оставалось в разумных пределах. К сожалению, вертикальный размер дисплеев не позволяет вместить весь список папок и файлов закладок, что может затруднить процесс сортировки. К счастью, у вас есть браузер Vivaldi! Просто откройте закладки в боковой панели и во вкладке, а затем просто переносите нужные из одной папки в другую.









3. Создание закладки



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









4. Изменение стартовой Экспресс-панели



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









5. Просмотр сохранённых паролей



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



chrome://settings/passwords



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



image


6. YouTube каналы в боковой панели



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



image


7. Быстрое клонирование вкладок



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



8. Настройки, как домашняя страница



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



9. Быстрый поиск вкладки



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









10. Жест-змейка



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









На этом пока всё. Напоминаем вам, что загрузить стабильную версию браузера Vivaldi можно с официального веб-сайта, а тестовые сборки всегда доступны в блоге разработчиков. Ну, и не забывайте отправлять нам сообщения об ошибках, а также свои предложения и пожелания — всё это мы ждём от вас по прежнему адресу.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/303496/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<юзабилити - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda