Хочешь свой плейлист?
1. AC DC - Back in Black
2. AC DC - HIGWAY TO HELL
3. AC⁄DC - Touch To Much
4. Alle Farben - Bad Ideas
5. Arilena Ara - Nëntori (Bess Remix)
6. Artik pres. Asti - Никому не отдам
7. Ben Delay - I Never Felt so Right (Club Mix)
8. Bob Marley - Three Little Birds
9. Brandon Flowers - Can't Deny My Love
10. Burak Yeter feat. Danelle Sandoval - Tuesday
11. D.idJ - DoIt
12. Deadpool Rap - Sexy Motherfucker
13. Ellie Goulding - Lights
14. Ellie Goulding - Little Dreams
15. Eminem - Ass Like That
16. Estradarada - Вите Надо Выйти
17. Example - Changed The Way You Kiss Me
18. Gutter Brothers - Bitch (Original Mix)
19. IOWA - Нам же нравится одно и тоже (2014)
20. Innerpartysystem - American Trash
21. Jah Khalib feat. Кравц - Do It
22. Justin Timberlake - My Love (feat. T.I.)
23. Kadebostany - Teddy Bear (Astero Remix)
24. Lana Del Rey - Serial Killer
25. Lana Del Rey - Serial Killer (K Theory Remix)
26. M83 - Oblivion
27. METAHESH - Better Than Sex
28. Mapei - Don't Wait
29. Misha Daniels - Run Away (Deep Mix)
30. Moonbeam & Indifferent Guy Eva Pavlova - Follow Me
31. Mos Def And Massive Attack - I Against I
32. Nero - Satisfy (Original Mix)
33. No Limits, Jovan Wilder - Slow Down
34. Oh Wonder - Shark (Illenium Remix)
35. Queen - I Want To Break Free
36. Radio Record - РОДРИГЕС ТИМУР
37. Shakira - Waka Waka (Time for Africa)
38. Snakehips & MØ - Don't Leave
39. The Black Eyed Peas - Meet Me Halfway
40. The Prodigy - Girls
41. The Rolling Stones - God Gave Me Everything
42. The Weeknd ft. Daft Punk - Starboy
43. Vitalic - Poison Lips
44. Wiz Khalifa - Work Hard, Play Hard
45. Баста - Голос (feat. Полина Гагарина)
46. Батишта и Ромади - Формула любви
47. Би - 2 & Чичерина
48. Градусы - Радио дождь
49. Елка - Грею счастье внутри
50. Иван Дорн - Ты всегда в плюсе
51. Каста - Радиосигналы
52. Кравц - Море
53. Марсу Нужны Любовники - Ветер сдувает с крыш
54. Марсу Нужны Любовники - Дальневосток
55. Марсу Нужны Любовники - Её глаза
56. Марсу Нужны Любовники - Застелю Цветами
57. Марсу Нужны Любовники - Скользим
58. Михаил Озеров & Ирина Обрезкова - Лава
59. Моя Мишель - Настя
60. ПИЦЦА & L'One - Мир
61. Пика - Патимейкер
62. Пицца - Романс

Добро пожаловать на DevsAid.Com!

Внимание! Объявляем конкурс на лучший новостной пост!
Получай уведомления в Telegram или по СМС!
Заработай на публикации тем на форуме!


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

125 простых советов по улучшению юзабилити вашего сайта

Тема в разделе "SEO", создана пользователем News_Bot, 11 янв 2017.

  1. Категория 1. Управляйте вниманием пользователяВыделите точку входа в интерфейс В каждом интерфейсе должна быть чёткая отправная точка. Куда зрители должны посмотреть вначале? Сделайте это очевидным.
    Создайте визуальный контраст для заголовков страниц
    d88a5654948b0df52f87d94363468fe5.png
    Комментарий Проектората: избегайте комбинировать разные способы выделения для одного заголовка (например, большой, жирный ярко-красный заголовок будет в большинстве случаев избыточным). Принимая решение о визуальном выделении, примите в расчёт то, как оно может выглядеть в адаптивных версиях. Направляйте пользователей с помощью визуальной иерархииИзбегайте пустых пространств, «запертых» внутри композиции
    3c4c9634df7593cadb257eeda822a666.png
    Комментарий Проектората: эти несколько советов построены на принципе F-паттерна считывания контента. То есть, пользователи читают сверху-вниз слева-направо и дизайнеру следует избегать неожиданных «прыжков» и «развилок» в восприятии. Всё верно, но не стоит забывать, что некоторые языки читаются справа-налево (<span class="c1"><a class="c2" href="http://he.aliexpress.com/">http://he.aliexpress.com/</a></span>). Это раз. А два — интерфейсы, с которыми пользователи работают ежедневно, не обязательно должны быть легко воспринимаемыми. Они должны быть удобными для выполнения задач пользователя. Пример запертого пустого пространства — чаты в fb, которые появляются в правом нижнем углу экрана один за другим по горизонтали. И ничего плохого в этом нет. Профессиональный софт может обладать высоким порогом входа для новых пользователей, но сторицей окупится после его преодоления. Компонуйте элементы в одну колонку
    8460594d4c68c9fa9796c90c1954d5d2.png
    Перекройте один элемент другим, чтобы подчеркнуть целостность
    8e240c8028e9261b88587b2e8634e47c.png
    Проектируйте интерфейс с учётом гештальт-принципов Мы буквально завалены раздражителями в интерфейсах. Согласно гештальт-психологии, мы постоянно стараемся преодолеть этот хаос, упрощая наше восприятие. Мы группируем объекты, разбиваем элементы на категории, пытаемся увидеть картину целиком.
    Некоторые из принципов: сходство, близость, замыкание, связь, непрерывность и фигура и фон.
    Принципы гештальта
    cf12b44361ecec9d1b0c136a3479da12.png
    Расположите близкие по смыслу функции или пункты меню ближе друг к другу
    ead7cc1aedd9ed6a1172607b268141f0.png
    Переместите заголовки ближе к релевантному тексту
    1b4c3538e7646734cccfdcd857ef39e0.png
    Поместите заголовок в один блок с озаглавленным текстом
    e81857966f88adcfacb91ef86a2c7fd2.png
    Комментарий Проектората: Артемий Лебедев в 2006 году написал параграф Ководства «Теория близости» (http://www.artlebedev.ru/kovodstvo/sections/136/). В проектировании это до сих пор правило номер один по частоте использования. На второе место мы бы поставили цветовое кодирование. Затем всё остальное. Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство Иногда интерфейс видоизменяется прямо на глазах у пользователя. Сделайте эти изменения заметными, но не вводящими в замешательство.
    Добавьте анимацию изменений в интерфейсе
    d6ee0e6e386045b7b40bf6b932de2e9e.png
    Выделите элементы, из-за которых возникла ошибка
    eb7d5856f1ab93687053df60b5487fd8.png
    Комментарий Проектората: хороший интерфейс никогда не забывает давать пользователю обратную связь. Отправляются данные — нам об этом говорит анимированная иконка, товар добавился в корзину — значок корзины видоизменился заметным образом (изменились цвет и состав), удалили пункт в списке — остальные элементы поползли вверх, нажали на якорную ссылку — страница плавно и быстро скроллится к нужному месту, а не мгновенно переносится в нужные координаты. И так далее и тому подобное. Оба совета из статьи охватывают все вышеперечисленные вещи, поэтому тут без критики, мы с этим пунктом согласны. Уберите или снимите акцент с ненужной информации Наша способность фокусироваться не безгранична. Ненужные элементы будут истощать этот ресурс. Поэтому удерживайте внимание пользователей на важных сведениях и функциях.
    Затемните фон за поп-апом или модальным окном
    df29e7c2a0d976fdb687d1ca7d61d90b.png
    На всех изображениях откажитесь от излишних украшений
    7aba0bb9260ff00c9e56029350160cc4.png
    Уберите ненужные рамки вокруг элементов
    7e4d1c864980f31f599c559903ab107a.png
    Удалите излишние или очевидные инструкции
    75b4e5c42681bab6cf30ee8e7dd5a58d.png
    Спрячьте важные, но редко используемые настройки, возможности и сведения
    019f3a91f8a48ab888944b9da3332672.png
    Комментарий Проектората: прекрасные советы! Можем лишь дополнить ссылкой на видео с Дмитрием Сатиным. Это отрывок из выступления «Психология восприятия». https://www.youtube.com/watch?v=dlTrFsylyR4 Покажите, что содержимое есть за границей видимой области Большинство современных браузеров прячут полосы прокрутки, когда вы их не используете. Оставьте пользователям подсказки, что за границей видимой области тоже есть содержимое.
    Пусть элементы обрезаются границей видимой области
    ac486529395c8671e452c0a592107120.png
    Добавьте тень, чтобы показать глубину
    2634bb722fa3a51ca13b007d457f3de0.png
    С помощью слов или графики покажите, что ниже есть дополнительное содержимое
    ab59215ebb379bd6375a271bba4b49da.png
    Категория 2. Ведите пользователей к целиДелайте часто используемые функции и важную информацию доступнее пользователям Предугадывайте стремления пользователей. После этого располагайте объекты этих стремлений в максимальной доступности.
    Предлагайте быстрые варианты для поиска с первых введённых символов
    b973a4b1c8f395c716055509658f2bec.png
    Создавайте значения по умолчанию в соответствии с самыми частыми запросами
    48ceccb99fcf1e502de6fea40acb22ea.png
    Показывайте полезную информацию при наведении курсором на объекты
    bf76e6548b60e5b4b8bb0bad4ed712f1.png
    Не прячьте часто используемые функции
    02c4feb13951d700ba08027d2b592aa9.png
    Показывайте на дэшбордах важную информацию
    b6483f2808852873ed08831e889d198f.png
    Помещайте популярные варианты в самый верх выпадающих списков
    9a63843401439f060c4612fc5f646193.png
    Комментарий Проектората: хотелось бы предостеречь от слепого следования советам про ховеры (наведение курсором на объекты) и дэшборды. Ховеры мы не любим на мобильных устройствах. А дэшборды иногда лучше заменить переходом в раздел, с которого начинается работа пользователя (например, список входящих счетов или заявок в crm или список входящих сообщений в почтовом клиенте. Хотя что там, что там можно было бы придумать свои дэшборды). Сообщайте о статусах процессов Снижайте уровень неопределённости, демонстрируя пользователю релевантную информацию о состоянии системы.
    Демонстрируйте состояние прогресса и оставшееся время до завершения машинных процессов
    d58641340d964d224017ade926206915.png
    Демонстрируйте текущее состояние сложных или растянутых во времени процессов
    e1bd329c096021ba75da55a8fbc054ad.png
    В рамках последовательности экранов указывайте общее количество шагов
    23efe490ceaac4fdb101cddcca528b82.png
    Показывайте количество элементов в категориях
    8aeb6cea7e7b6a0b706864e5ba75bf71.png
    Комментарий Проектората: а это редкий пример таких советов, которые будут действовать, даже если вырвать их из контекста. Предлагайте несколько путей достижения одной и той же цели Разные пользователи отдают предпочтение разным сценариям работы с системой. Создавайте разные пути для достижения одних и тех же целей и позволяйте пользователям самостоятельно выбирать те варианты, которые лучше подходят для их привычных сценариев работы.
    Позвольте авторизоваться как с помощью имени пользователя, так и с помощью адреса электронной почты
    9fde6b5eeb6eba6bfb2a59c8656e6082.png
    Предложите выполнять повторяющиеся функции с помощью клавиатуры
    c7dc2095b69d3420581f613546924fbb.png
    Позвольте перетаскивать элементы курсором
    f2ebbd39efadd20f47b53e5288253e82.png
    Позвольте редактировать данные напрямую
    530f694a2e0ee567c4ac566181921749.png
    Комментарий Проектората: предлагать пользователям альтернативные пути решения задач мы бы не стали. На самом деле можно дать комментарий по каждому из советов. Авторизация с использованием разных логинов — сложное и важное решение. Оно будет зависеть от системы управления сайтом, требований к безопасности, бизнес-требований к системе, а не от прихоти дизайнера. Сопровождение повторяющихся функций клавиатурными шорткатами подходит в основном для настольных интерфейсов, а захламлять ими интерфейсы, которыми пользуются с планшетов, не стоит. Перетаскивание элементов курсором иногда может привести к нежелательным последствиям. Например, когда вы хотели выделить текст в элементе, а вместо этого утащили его. Поэтому, здесь тоже нужно принимать взвешенное решение и учесть много факторов. То же касается и редактирования данных напрямую. То есть, все эти советы по-своему хороши, но в отрыве от контекста могут здорово навредить. Сообщайте о требованиях и параметрах интерактивных элементов Подготовьте пользователей к каждому взаимодействию с интерфейсом. Что им понадобится? Как им перейти к следующему шагу?
    Опишите требования к данным, которые вводят пользователи
    78d18c21bbd839af23ce08ae3aec1f5a.png
    Давайте обратную связь и требования к паролю в режиме реального времени
    0edcb3749cc5cef95a2d532e40529022.png
    Сопровождайте элементы форм универсальными обозначениями
    794c1fb6f5d6fc8086c21227c45364bd.png
    Показывайте, какие поля форм обязательны к заполнению
    4cdff77a7c8b24ab3922d68a52b52137.png
    Комментарий Проектората: здесь мы можем лишь пожаловаться на отсутствие внятного термина в русском языке, передающего смысл слова Interaction (дословный перевод: «взаимодействие»). Подсказывайте, что произойдёт в результате взаимодействия с интерфейсом Прежде чем пользователь совершит какое-то действие в интерфейсе, он должен понимать, что получит в результате этого действия
    Пишите на кнопках, что конкретно произойдёт после нажатия
    26972f56b3172842157f621f1f617112.png
    Показывайте, как будет выглядеть результат уже на этапе ввода данных
    dc8053489b1928ab429ca0a67a6dc5b6.png
    Показывайте, что будет следующим в списке
    03c7c1cd7d248980903d8ebaf5a206f4.png
    Используйте «умные» пункты меню, дающие детальную информацию о результатах их использования
    997383823f58416982e62854d9fdf986.png
    Комментарий Проектората: все эти советы хороши с точки зрения маркетинга в первую очередь. Они отвечают на вопрос «что произойдёт, когда я нажму на эту кнопку?» Это снижает уровень неуверенности перед совершением тех или иных действий и повышает конверсии на посадочных страницах. Награждайте и создавайте чувство уверенности у пользователей, идущих к цели сквозь ваши интерфейсы Приближаются ли пользователи к цели? Увенчалось ли успехом их предыдущее действие? Сообщите им об этом. И приободрите продолжить путь.
    Соблюдайте соответствие между ссылками и страницами, на которые они ведут
    425cdfc4441c5876bcb979ad9a54d73b.png
    Награждайте маленькими победами в начале пути
    41fe534c5b04d934fc6d125290f9ead3.png
    Полосы прогресса начинайте со значений выше 0%
    95eeccda2d93a0a3af396eb5137c25d9.png
    Комментарий Проектората: первый пункт — это «правило последовательности». После того, как пользователь нажал на ссылку с текстом «Регистрация» он не должен попасть на страницу «Создание аккаунта нового пользователя». Правило последовательности — одно из важнейших при создании высококонверсионных интерфейсов. Второй пункт всегда будет зависеть от контекста и не является универсальным. Третий пункт можем дополнить: не заканчивайте полосы прогресса значениями 100%, т.к. в этот момент пользователь может решить, что задача выполнена, и нарушить сценарий. Закрывайте главные потребности пользователей Зачастую интерфейсы решают лишь потребности, лежащие на поверхности. Смотрите шире. Всегда задумывайтесь над тем, зачем именно пользователям нужны те или иные функции или информация. Затем предложите решение, которое нужно им на самом деле.
    Указывайте, открыт или закрыт ваш офис прямо сейчас
    1abe919ad3e9c836b69d68a876fbea44.png
    Указывайте актуальность ближайших событий относительно сегодняшнего дня
    72b3f8cf39cc442d9ee530343b68a0c4.png
    Комментарий Проектората: второй совет во многих случаях работать не будет, будьте осторожны. Иногда нам не важно, сколько дней, часов или минут назад произошло то или иное событие, а важно, когда и во сколько. Категория 3: уменьшите умственные усилия ваших пользователей и поддерживайте скорость их движения сквозь интерфейсыИзбавьте пользователей от подсчётов в уме Никогда не заставляйте пользователей заниматься математикой в ваших интерфейсах. Пускай за них это делает компьютер.
    Показывайте оставшееся количество всяких штук
    91453b5c3b29304ccd5e5bfff0127987.png
    Комментарий Проектората: только в тех местах, где эта информация действительно нужна. О, кстати! По легенде мобильные операторы не показывают остаток на счету постоянно на экране телефона, потому что это будет склонять пользователей распоряжаться средствами более экономно. Сообщайте о текущем положении пользователя в интерфейсе Интерфейсы чем-то похожи на аэропорты. Без указателя «вы находитесь здесь» пользователи могут заблудиться. Поэтому создавайте такие указатели.
    Выделяйте текущий раздел в меню навигации
    cd9c3eed1d3b72b511902b73729b0e40.png
    Комментарий Проектората: мы на практике чаще всего используем выделение цветом. Причём, текущий пункт выделяется менее ярким цветом, чем все остальные (название страницы и так продублировано заголовком, а пользователь, обращаясь к меню навигации, в большем числе сценариев захочет не убедиться, где он находится в структуре сайта, а перейти в соседние разделы). Подчёркивание в веб-интерфейсах всё же ассоциируется со ссылкой, поэтому, если один пункт подчёркнут, то и остальные тоже (но бывают исключения), жирность изменяет ширину блока, в котором находится текст, поэтому во многих случаях может вызвать внезапные сдвиги и переносы слов. Поэтому мы бы рекомендовали использовать цвет, указатель и фон именно в такой приоритетной последовательности. В сложных интерфейсах используйте «хлебные крошки» и пошаговые карты
    e4cdb900a9392b926326581cc33e0ad2.png
    Размещайте полезную информацию в начале заголовков страниц
    14cd8c18253b64b4a5f79e620c6577b8.png
    Упрощайте задачи, связанные с выбором Выбор требует от пользователя определённых усилий. Уменьшите эти усилия, упростив выбор.
    Выделяйте опции, которые выберут большинство пользователей
    ad705a8e7453337a3af8143ece472a36.png
    В поле поиска сразу предлагайте самые распространённые запросы по мере ввода
    3de226b5c8872a390f0b8f6126e17c0a.png
    Не создавайте гигантских категорий в меню навигации
    d5a4e1c273b112d4626b5247f1730eef.png
    Комментарий Проектората: в целом всё так, но давайте рассмотрим подробнее первый и третий пример. В первом примере возможны варианты, когда выделяют не самый часто выбираемый товар, а тот, который стоит продвигать. Здесь бизнес-составляющая вступает в борьбу с пользовательской. А в третьем примере бывают десятки случаев, когда имеет смысл в категории показать большое количество информации и таким образом сделать её гигантской. Например, в интерфейсах, где не требуется низкий порог входа, такое решение будет уместным. Используйте общепринятые интерфейсы в веб-дизайне Креативность — это здорово. Но не убегайте далеко от общепринятых вещей в дизайне. Пользователи уже привыкли к определённым структурам и шаблонам. И они популярны именно потому что хорошо работают.
    Используйте общепринятые меню навигации
    04eef5846b5a17e0370d9d92cfbf4a33.png
    Помещайте вспомогательные элементы в правый верхний угол
    f5983ff4ca87e63e3ea7b306787775c2.png
    Комментарий Проектората: оба совета без конкретных примеров проектов абсолютно бесполезны. Глядя на второй совет, задаёмся вопросом, а что нам делать, если на нашем проекте присутствуют все перечисленные вещи? Помещать их в правый верхний угол? Нет. Механизмы расстановки элементов по странице гораздо глубже и сложнее, чем может показаться на первый взгляд. Поэтому, подчеркнём лишь часть совета, написанного выше: не занимайтесь креативом, не понимая принципов, по которым создавались общепринятые паттерны в дизайне. Если же вы их понимаете, то кто же, кроме вас, придумает ещё более эффективные паттерны, чем те, которые уже существуют? ;) Предоставляйте обратную связь после каждого взаимодействия Когда пользователи взаимодействуют с вашим интерфейсом, они должны получать обратную связь в режиме реального времени. Завершилась ли операция успехом? Или наоборот? Что изменилось?
    Показывайте сообщения об успешном завершении важных взаимодействий
    fb37c4fb2fe140380c7ac6c5007b1a60.png
    Выделяйте объекты, на которые пользователь навёл курсор
    cb2e8cbb3fe8709abd7583bd8f3d4665.png
    Комментарий Проектората: очень дельный совет. Во время проектирования начинающие специалисты часто упускают эти моменты. Мы в Проекторате называем многие завершённые сценарии «тупиковыми» страницами и прорабатываем их отдельно. Что видит пользователь после того, как он успешно выполнил свою задачу на сайте? Куда ему идти дальше? Какую информацию он хотел бы получить прямо сейчас? Уменьшайте негативные эффекты во время ожидания Избавляйтесь от всех ненужных периодов ожидания. Но если всё же пользователи вынуждены ожидать, минимизируйте негативный эффект от этого процесса.
    Используйте спокойные цвета в загрузочных анимациях, чтобы уменьшить раздражение
    83fc96fcba6cc980ee1fabb298bd7b1d.png
    Синий цвет снижает раздражение (и повышает расслабленность). Когда пользователи смотрят на синие индикаторы загрузки, время для них летит быстрее (http://repository.ust.hk/ir/bitstream/1783.1-1752/1/jmr01.pdf).
    Поддерживайте вовлечённость пользователей во время длинных периодов ожидания
    f94a1b87b4f4344819ea971261a8bf1d.png
    Заранее предотвращайте загрузку файлов, не подходящих по типу или размеру
    d82d4d1753deff706aa2970c26bc50db.png
    Показывайте серию возникающих задач целиком
    d52db5d843fb782ee042e4a56fa0b974.png
    Комментарий Проектората: мы согласны с этими советами. Сразу на ум приходит Youtube, который во время загрузки видеоролика на сервис позволяет заполнить все поля, необходимые для публикации, а после загрузки и вовсе уйти с этой страницы. Уведомление о завершении обработки ролика мы получим на адрес электронной почты. Не рассчитывайте на память пользователей Не заставляйте пользователей хранить всё в памяти. Держите всю уместную информацию у них перед глазами.
    Подписи к полям форм всегда должны быть видимы
    faaf9a6170da3fcd477195098e16549d.png
    Размещайте тексты плейсхолдеров вне элементов форм
    f0c6c94d6697aeed4447f1d2250f5786.png
    Добавляйте кнопки «Копировать» рядом с данными, которые нужно переносить в другие поля
    6f17c68993243be3370c35795c222033.png
    Комментарий Проектората: почти всё верно. Но на самом деле в формах из двух-трёх суперочевидных полей можно пренебречь правилами и про подписи, и про плейсхолдеры. Что касается кнопки «Копировать», то на практике чаще применяется приём автоматического копирования в буфер обмена при клике по полю с нужными данными. Избегайте зигзагообразных паттернов движения глаз Уменьшите количество движения глаз «туда-обратно» ваших пользователей. Держите всю добавочную информацию поближе к основной.
    Группируйте схожую информацию, чтобы помочь пользователям сравнивать объекты
    1ee7506a7235a3e2ddf1b3cb8903e817.png
    Выравнивайте подписи к полям в формах по правому краю
    d0a192309efd7b6126f17de1469ea6bc.png
    Комментарий Проектората: сам по себе совет полезный, а вот приведённые примеры не имеют ничего общего с реальностью. Что в списке товаров, что в формах, решение о том, как они будут выглядеть, принимается на основе гораздо большего количества параметров, чем «зигзагообразное» движение глаз. Наглядно показывайте, с какими элементами интерфейса можно взаимодействовать Пользователи должны определять, какие элементы интерактивны (и как с ними взаимодействовать). Если вы знакомы с UX/UI, то вы, вероятно, знаете такие понятия, как аффордансы и сигнифаеры, популяризованные Доном Норманом в его «Дизайне привычных вещей» (http://www.amazon.com/gp/product/0465050654).
    Создавайте кнопки с использованием трёхмерных характеристик
    44e4a8d7a53305e7fea4e8a7ba31df33.png
    Добавляйте текстуры в виде точек для элементов, которые можно перетаскивать
    a2a28b1caa7c3697c75930ec1176a6ff.png
    Используйте иконки и символы, чтобы передать значение взаимодействий
    f5460bea46b63345f05b6b7b4c0e1177.png
    Комментарий Проектората: согласны. Любые интерактивные элементы должны сразу восприниматься, как интерактивные. Ссылки, кнопки, динамические объекты. Распространённая ошибка у дизайнеров: оформить некоторые элементы так, что единственным индикатором их интерактивности будет курсор, превращающийся в палец. Общайтесь с пользователями с помощью знакомых всем слов и символов В большинстве случаев ясность послания выигрывает у креатива и жаргонизмов.
    Разговаривайте на языке пользователя, а не системы
    7c452a00b8a2d8576b81cd03e7f0d078.png
    Надпись на левой части картинки: «Системная ошибка! Бла-бла-бла на компьютерном жаргоне»
    Надпись на правой части картинки: «Упс, что-то пошло не так! Но вы можете исправить это с помощью…»
    Предлагайте кнопку перевода для иностранных языков
    abafebebedc4349957bd5ff5311a4837.png
    Используйте цвета, подходящие по смыслу
    bfcbf2321bc26d8fd6ab76eb696fbc1f.png
    Комментарий Проектората: в целом согласны. В непрофессиональных интерфейсах действительно нужно говорить на языке пользователя. А красные кнопки вряд ли будут ассоциироваться с безопасным действием. Однако, из трёх советов в качестве универсального мы бы оставили только первый. Встроенный перевод — это дополнительное функциональное требование к системе, а цвета элементов — вопрос субъективный, требующий тестирования в разных конкретных случаях. Увеличьте считываемость вашего интерфейса Большинство пользователей будут продвигаться по интерфейсу, бегло его просматривая. Не стоит с этим бороться. Наоборот, воспользуйтесь этим. Сделайте ваш интерфейс более удобным для беглого просмотра.
    Сокращайте объём параграфов и выделяйте основные мысли
    9bf6320c1c1b90e0781353a52f167d2f.png
    Размещайте важную информацию в начале списковых элементов
    beccc473d07bb634204abeb1780da3f8.png
    Добавляйте чередующиеся горизонтальные полосы в таблицы
    e5a02a2c39d3b25c131aa7e499f1d41d.png
    Пишите подзаголовки, раскрывающие суть абзацев
    275000da1e69845b09c40540fbe4bf12.png
    Разбивайте текст визуальным разнообразием
    e12e482bc01fcab02b40a0ec09abe889.png
    Комментарий Проектората: так и хочется на этот набор советов ответить фразой «Спасибо, Кэп!» А значит, для самых маленьких они отлично подойдут. Делайте текст максимально читабельным Очевидно, что текст обязан быть легко читаемым. Однако, вот несколько дополнительных советов, которые позволят сделать его считываемость ещё более высокой!
    Создавайте сильный контраст между текстом и фоном
    fb99f79ab1c709141417c8e72fa9d084.png
    Выравнивайте большинство текстов по левому краю
    1d2e98d789d78e85dd37fb21063cba76.png
    Комментарий Проектората: оба совета универсальны. Несмотря на их очевидность, до сих пор можно часто встретить посадочные страницы с красивыми картинками, на которых невозможно считать текстовое торговое предложение. Выравнивание текста по левому краю также рекомендуется в большинстве случаев. Исключения можно перечислить по пальцам и все они связаны с одноколоночными узкими лейаутами (в основном это мобильные приложения и посадочные страницы). Используйте единый стиль в интерфейсах Если в ваших интерфейсах одни и те же элементы будут выполнены в разных стилях, пользователям потребуется больше времени на их изучение. Упростите для них эту работу, используя единый стиль и лейаут.
    Подготовьте руководство по стилю интерфейса
    a535bf3fc4a8536c03e3ef5ed41fe068.png
    Нужно вдохновение? Попробуйте взглянуть на руководство по стилю Мэйлчимпа (http://ux.mailchimp.com/patterns)
    Располагайте меню навигации в одних и тех же местах
    c0746230a380b5324eb33e7e4a34608c.png
    Комментарий Проектората: в работе по созданию прототипов мы не готовим руководств по стилю, но осознаём важность этого этапа в дизайне. Что касается навигаций, то обратим особое внимание читателя на меню, которые видоизменяются при смене пользовательских ролей. Например, всё, что связано с личным кабинетом пользователя, желательно оставить в том же месте, где была кнопка авторизации и регистрации. Создавайте красивые, визуально сбалансированные интерфейсы Интерфейсы более удобны, когда они приносят эстетическое удовольствие пользователю. Этот принцип называется эффектом эстетического юзабилити (Куросу и Кашимура, 1995, http://dl.acm.org/citation.cfm?id=223680).
    Создавайте интерфейсы, используя математические законы
    de900c1b980fa3633dfcbf68b0781820.png
    Используйте контрастирующие шрифты
    92c23bcd3624c3a61b6b670eafe3019a.png
    Комментарий Проектората: эстетичность дизайна — понятие субъективное и требует проверки разных вариантов на разных аудиториях. На этапе проектирования такая проверка зачастую невозможна, поэтому не стоит придавать этому большое значение. Однако, также заметим, что, чем опытнее проектировщик, тем более эстетичными кажутся его прототипы окружающим, а это является дополнительным аргументом в пользу работы с конкретным исполнителем. Категория 4: максимизируйте совместимость для всех пользователей и сценариевМаксимизируйте совместимость с учётом уровней знаний и навыков пользователей Ваши пользователи будут представлять новичков, опытных пользователей или нечто среднее. Проектируйте интерфейсы с учётом этих уровней.
    Используйте вводные интерфейсы в нужном количестве Существует четыре основных стратегии по созданию вводных интерфейсов:
    89b642a03868a6ceff2b75060b39135e.png
    Они могут быть легко размещены в матрице 2х2. Используйте диаграмму ниже для выбора стратегии по созданию вводных интерфейсов, подходящей именно для вашего интерфейса.
    1f0d96a6041f35a8b33a5d949b75201c.png
    Добавляйте всплывающие подсказки, чтобы помочь новичкам, при этом не отвлекая опытных пользователей
    fb4ca0a6b3514b1f7a81cf1e58e390a3.png
    Используйте методы карточной сортировки при создании информационной архитектуры
    7b3105aaa6582dc77a83298060aa932e.png
    Комментарий Проектората: вот и подобрались мы к советам, важность которых сложно переоценить, хотя выглядят они довольно капитанскими. Один из сложных навыков проектировщика: в процессе работы удержать в голове множество параллельных сценариев от лица разных типов пользователей, которые происходят в одних и тех же интерфейсах. Стоит забыть о ком-то из них — и получится урезанный вариант. Или, наоборот, стоит увлечься теми пользователями, которые представлены очень малочисленной группой от всей аудитории, — и получится интерфейс, неудобный для большинства. Ребята, если вы не знаете про методы карточной сортировки, — погуглите. Это распространённая вспомогательная методология для формирования навигационных решений и рубрикаторов. Максимизируйте совместимость с процессами работы, привычными пользователям У пользователей будут свои разные потребности. Проектируйте интерфейсы таким образом, чтобы они отвечали разным пользовательским подходам к работе.
    Позвольте пользователям выбирать способ отображения данных
    001abfc2bbd6cf8fdba18cab7e74a562.png
    Дайте пользователям выбирать способы сортировки данных
    482183668f12bde66d8ca21b44badd5d.png
    Дайте пользователям управлять количеством отображаемых данных
    f42c915353c73dbc78b97583e2748dcc.png
    Используйте метод персонажей для описания процессов работы с интерфейсом от лица разных пользователей
    894bf7d9adae4e775d5d1d2f3eaafb81.png
    Не запрещайте пользователям открывать страницы в новых вкладках
    f48c928d2882150213fa77cbda67f6b1.png
    Комментарий Проектората: решение о том, стоит ли давать пользователям свободу выбора, принимается на основе большого количества факторов. И нужно понимать, что представленные советы работают только в том случае, если это решение было принято в пользу свободы. Что касается сортировок и фильтраций, рекомендуем ознакомиться со «старым, но не бесполезным» уроком Егора Камелева по проектированию универсальных каталогов (<span class="c1"><a class="c2" href="https://www.google.com/url?q=https://www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&ust=1483593605514000&usg=AFQjCNFUb6rHQsFPF3IOHGtpVpH0vnYHyA">https://www.youtube.com/watch?v=EfQGWz3L2Q4</a></span>). А за методом персонажей, если вы о нём не слышали, снова направляем вас в Гугл. Максимизируйте доступность вашего интерфейса Сделайте ваш интерфейс доступным для пользователей с ограниченными возможностями. Это не только хорошая практика, но и в некоторых странах повод для получения дополнительных привилегий (https://en.wikipedia.org/wiki/Americans_with_Disabilities_Act_of_1990).
    Используйте семантическую разметку (метки) в HTML5
    02b3ef2daa7921574c242badce4fcfd5.png
    Одновременно используйте разные индикаторы для выделения информации Около 8% мужчин плохо различают цвета. Старайтесь никогда не выделять элементы только с помощью цвета. Используйте дополнительные подсказки в виде разных форм объектов и иконок.
    79d1882a8b220b7850ceace062b76c2c.png
    Комментарий Проектората: семантическая разметка подойдёт не только для людей с ограниченными возможностями. Если она используется, ваши сайты можно будет просматривать в режиме удобного чтения статей, либо перемещаться от блока к блоку с помощью голосового управления (не только, если пользователь слеп, но и, например, если он управляет автомобилем). Второй совет будет сильно зависеть от контекста, но в большинстве случаев его действительно стоит применять. А вот ссылка на материал про 8% мужчин: <span class="c1"><a class="c2" href="https://www.google.com/url?q=http://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3&sa=D&ust=1483593605518000&usg=AFQjCNEW2_GkX0RQIWK_3K9yckxZ2NfEeQ">http://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3</a></span>. Максимизируйте доступность для полей ввода данных и для крайних сценариев Пользователи должны иметь возможность вводить разнообразные данные без негативных последствий.
    Избавьтесь от неожиданно неприятных посланий в автоматически сгенерированных сообщениях
    a3c7334662c2c5f2e891b5ec9c691579.png
    Надпись на левой картинке: «Желаем повеселиться в Освенциме!». Надпись на правой картинке: «Хорошей поездки!».
    Используйте элементы форм, которые «съедают» разные форматы данных
    2661a04ac9c551a123403037ff903798.png
    Показывайте результаты, которые решают задачи ищущего
    f32da3ba4fae068ae10ab3b148fe8329.png
    Используйте поисковые поля, которые справляются с опечатками, синонимами и вариациями написания
    f5cea4ddaa48293bebab8a23bc289d04.png
    Комментарий Проектората: в рамках этих советов основная нагрузка ляжет на программистов. Дизайнеры и проектировщики на практике редко сталкиваются с подобными задачами, детализируя свойства таких полей в функциональных спецификациях. Использование этих советов может оказаться одной из ступенек для перехода проектировщиков на новый качественный уровень работы. Максимизируйте доступность для всех контекстов Ваш интерфейс должен работать во всех контекстах использования (на разных устройствах, браузерах и т.д.)
    Создавайте инструкции для разных браузеров
    bf0ef45905509bf3bed38e03c9dd963d.png
    Надпись справа: «Вижу, вы используете Firefox».
    На маленьких устройствах используйте выпадающие списки, занимающие весь экран
    d14c7716c58cc428ca92c7ca412e76f3.png
    Комментарий Проектората: давайте согласимся с советами, использовав одну оговорку. «Ваш интерфейс должен работать в тех контекстах использования, которые удовлетворяют целевой аудитории вашего проекта». Нецелесообразно тратить на оптимизацию проектов значительные суммы только для того, чтобы угодить доле процента ваших пользователей. Категория 5. Помогайте пользователям сталкиваться с меньшим количеством потенциальных ошибок и преодолевать их В большинстве интерфейсов совсем избежать ошибок невозможно. И если они возникают, помогите вашим пользователям преодолеть их быстро и с лёгкостью.
    Предотвратите возможность возникновения ошибок При создании интерфейса не стоит сразу сосредотачиваться на решениях для демонстрации возникающих ошибок. Вместо этого попробуйте спроектировать его так, чтобы этим ошибкам невозможно было появиться.
    Отключайте кнопки сразу после того, как по ним кликнули Не просите пользователей кликнуть по кнопке «Подтвердить» один раз. Если они могут кликнуть несколько раз, они кликнут. Вместо этого отключайте их после клика. Таким образом вы не позволите случайно отправить данные несколько раз.
    05823fe6145e1c4ff229023799420e77.png
    Предлагайте такие поля ввода данных, которые не позволят ввести неподходящие значения
    d84fcc32da6e03064ae174494486306d.png
    Используйте отзывчивые активацию и отключение элементов в формах
    edcfbac7a10b4413c3fb483f895d406f.png
    Оформляйте текстовые поля так, чтобы они соответствовали вводимым данным
    1d8ff51841c39fc3e9178a7f42fd60f0.png
    Комментарий Проектората: эти рекомендации стоит применять в своей работе всегда! Только осторожнее с советом про оформление текстовых полей: не забудьте проконсультироваться с вашим программистом о типе данных, которые вы хотите из этих полей забирать. Отслеживайте сигналы о том, что пользователь вот-вот допустит ошибку Какие самые распространённые ошибки генерируют пользователи в вашем интерфейсе? Определите сигналы, предшествующие этим ошибкам, и постарайтесь в момент их возникновения предупредить пользователей.
    Отслеживайте слова, которые выражают намерение пользователя
    60c22de850d71c682d179e190b2735cc.png
    Надпись слева: «Ваше сообщение было отправлено».
    Надпись справа: «Вы хотели прикрепить файл к сообщению? Вы написали «Я прикрепил», однако на самом деле ничего не прикрепили». И кнопки «Редактировать» и «Отправить».
    Напомните пользователям, что они уже приобрели товар, чтобы они случайно не купили его ещё раз
    8524397bf30878f07126ed05b05c211d.png
    Надпись на левой кнопке: «Купить».
    Надпись на правой кнопке: «Купить ещё один экземпляр».
    Комментарий Проектората: первый совет имеет отношение к почтовым клиентам и вряд ли пригодится в работе рядовому проектировщику. Реализацию второго совета мы ни разу не встречали на практике. Поэтому особо на них не заостряем внимание и двигаемся дальше. Отделите функции, влекущие за собой большие последствия, чтобы уменьшить вероятность их случайного использования Пользователи будут терять сосредоточенность. Этого вы не в силах предотвратить. Однако вы можете визуально отделить «мощные» функции от остальных, чтобы уменьшить потенциальное количество случайных ошибок и потерянных данных.
    Отделяйте «мощные» функции расстоянием или цветом
    7fbcb03cc743a7d832e19bb667b58d21.png
    Добавляйте ограничения для функций, влекущих за собой крупные изменения, которые невозможно откатить назад
    40c5181b1b30804e9d7557b5779977b4.png
    Комментарий Проектората: эти два совета универсальны и действуют во всех случаях. Кнопки выхода из аккаунтов должны размещаться в тех местах, где по ним случайно не кликнешь. А любые удаления критически важных данных должны сопровождаться дополнительными подтверждениями этих действий, либо возможностью откатить их в будущем. Предоставляйте возможности легко откатить или отменить действия Всегда позволяйте пользователям вернуться назад или восстановить страницу в исходное состояние.
    Лучше используйте откаты, а не дополнительные подтверждения
    92abee8e3846de6a65a41c96dc875066.png
    Давайте возможность вернуться «на исходную» в рамках любой страницы или функции вашего интерфейса Например, в некоторых выпадающих списках нет вариантов, позволяющих ничего не выбирать. И после того, как пользователи что-то выбрали, у них уже нет возможности отказаться от своего выбора.
    7926cfb6eb455167bf9b0af42e6a0a0f.png
    Явно показывайте кнопку «Закрыть» на модальных окнах
    d153e40f53eb2baf0e151877bcbad3f6.png
    Комментарий Проектората: эта часть статьи радует универсальными советами. Нам тут нечего добавить. Но раз уж начали… не забывайте в сложных фильтрах добавлять кнопки сброса к параметрам по умолчанию. Минимизируйте негативный эффект от прерванных последовательностей действий Пользователи должны иметь возможность вернуться к тому месту в последовательности, на котором они прервали свою работу, не потеряв данных.
    Сохраняйте введённые пользователями данные
    d118fc0b62ef2eb78fbccb56dea778f5.png
    Дайте пользователям вернуться в то же место последовательности, на котором они прервали свою работу в предыдущий раз
    b6c1a9c92143a1f3861afc39a28c6a6e.png
    Комментарий Проектората: и снова всё будет зависеть от технических ограничений системы и пользовательских сценариев. Советы хороши, но не универсальны, используйте их с умом. Увеличивайте размеры подвижных частей и кликабельных зон Пользователи не идеальны. Они делают ошибки своими курсорами. Создавайте гибкие, прощающие эти ошибки, интерфейсы.
    Увеличивайте кликабельные зоны элементов за счёт прозрачных границ
    b52481491ab016e956b066cbb44dbf6e.png
    Добавляйте небольшую задержку при уводе курсора с всплывающих меню
    577d6b56d5508d6f6439e25da7f1fe10.png
    Делайте ссылкой весь контейнер, содержащий пункт меню
    23a0c2ab5715f89bf5806b73b25aeec2.png
    Делайте ссылками корневые пункты меню навигаций, элементы списков, и дополнительные иконки Часто пользователи кликают на некликабельные элементы. Не боритесь с этими ошибками. Вместо этого добавьте этим элементам кликабельность.
    a9afa07bad8fd47d33fd8a6cf30ec35c.png
    Комментарий Проектората: дельные советы. Мы часто используем их на практике, создавая прототипы в Axure. С помощью хот-спотов, группировки элементов, а также использования прямоугольников с прозрачным фоном. Показывайте ценные и подбадривающие сообщения об ошибках Никогда не пишите стандартное сообщение «Произошла ошибка!» Объясните причину её возникновения и, при возможности, пути решения.
    Объясняйте причины возникновения ошибок
    46a8d21716180734c6eeb249379c431f.png
    Надпись слева: «Упс! Произошла ошибка».
    Надпись справа: «Упс! Это старый пароль».
    Направляйте пользователей к документации или в службу поддержки в случае возникновения сложных ошибок
    1f01314c9ef520a7a190201a52ba4588.png
    Надпись слева: «Упс. Произошла ошибка по причине XYZ. Теперь вы сами за себя».
    Надпись справа: «Упс. Произошла ошибка по причине XYZ. Вы можете её исправить с помощью ABC. Кликните, чтобы узнать детали».
    Избегайте обращений к пользователю на «вы» в сообщениях об ошибках
    f5211838d1cd3d91d02d43e0db1737ff.png
    Надпись слева: «Упс! Вы забыли ввести индекс».
    Надпись справа: «Упс! Пожалуйста, введите индекс».
    Комментарий Проектората: редкие проектировщики занимаются сообщениями об ошибках. Обычно эта задача ложится на плечи программистов, да и то, потому что им деваться некуда. А зря. Сохраняйте информацию о предыдущих действиях пользователей Напоминайте пользователям о действиях, совершённых ими ранее в вашем интерфейсе.
    Показывайте последние поисковые запросы пользователей
    2ba4afd7d49ccdc6b383c4c67dfbdd39.png
    Выделяйте посещённые ссылки другими цветами
    c7a63152541ec84a561507551e1f27e6.png
    Отмечайте, какие элементы пользователи уже просмотрели
    496046d9f4723efae84d659b355a3308.png
    Комментарий Проектората: здесь всё не так однозначно. Историю поисковых запросов иногда лучше не показывать в соответствии с политикой безопасности проекта. Не все посещённые ссылки следует выделять цветом. Чаще всего это нужно только в интерфейсах, где задача пользователя — последовательно просмотреть разные материалы под разными ссылками и не повториться. Не забывайте, что существует такой тип целевой аудитории, который пользуется семейным компьютером для просмотра одних и тех же ресурсов. Это, конечно, притянуто за уши, но хорошо иллюстрирует, что не стоит слепо следовать советам, приведённым выше. Анализируйте поведение пользователей на сайте, чтобы обнаруживать проблемы с интерфейсом Постоянно вносите итерационные улучшения в интерфейс. Для начала воспользуйтесь простыми советами ниже.
    Собирайте обратную связь от пользователей в соответствующих местах интерфейса
    02fc4f2f81e5db1804889278b05b3bb8.png
    Отслеживайте увеличение количества ошибок-404 с помощью уведомлений
    847e04f458d1e7d79809cc83d15dab3c.png
    Выявите страницы, на которых пользователи «топчутся на месте» Если страница набирает много просмотров, но при этом мало уникальных просмотров, то это повод удостовериться, не переходят ли пользователи на неё с неё самой.
    c490ecf46fe13bb5b386bf9ad903be43.png
    Комментарий Проектората: жаль, что об аналитике во всей статье всего три совета. Да и то поверхностных. Поблагодарим Ника за то, что он вообще о них упомянул, и будем считать, что аналитика в целом — это тема для другой огромной статьи. Вы прочитали перевод статьи Ника Коленды «125 Easy Tweaks to Optimize Your Website's UX/UI Today».
    Автор перевода и комментариев — Егор Камелев
     

    Вложения:


    Загрузка...
  • Кто мы?

    2 разработчика которые решили помочь другим разработчикам в решении их проблем, а так же пользователям с поиском самых свежих и качественных инфопродуктов. За 4 с небольшим месяца мы создали этот форум на который заходят ежедневно 1500 человек и посещаемость постоянно растёт. Мы создали панель лицензирования для защиты PHP скриптов от воровства и SEO панель для мониторинга наших сайтов и выбора верной стратегии их развития. Мы надеемся что то что мы создали пригодится Вам и возможно Вы поможете нам развиваться и совершенствоваться вместе с Вами.
  • Набираем команду!

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

    Вступай!