Logo
Тел: +375(29) 607-67-46
Тел: +375(29) 619-94-17 (тех. поддержка)
info@apostrofsoft.com
г. Минск, ул. Шафарнянская, д.18,
офис 16, этаж 1
ЗАКАЗАТЬ ЗВОНОК
Главная
Об ApostrofSoft
Услуги
Услуги
  • Сайты
    • landing-page
    • Интернет магазин
    • Корпоративный сайт
    • Портал
    • Сайт визитка
    • Сайт гос. учреждения
  • Мобильные приложения
    • Разработка Android
    • Разработка IOS
    • Кроссплатформенные приложения
  • Веб разработка
  • Проектирование
    • Составление технического задания
    • Прототипирование
    • Wireframing
    • UX/UI дизайн
  • Дизайн
    • Дизайна сайта
    • Разработка лого
    • Разработка фирменного стиля
    • Апгрейд&Редизайн сайта
  • Сопровождение
    • Поддержка сайта
    • Информационная поддержка сайта
    • Доработка сайта
Наши работы
live
Контакты
...

    БЛОГ APOSTROFSOFT
    Обзор встречи “подружи пользователя со своим интерфейсом”
    26.08.2019
    Автор
    РАЗБИРАЕМ ОШИБКИ ПРИ ПРОЕКТИРОВАНИИ ИНТЕРФЕЙСОВ

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

    1 (1).png

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

    1.1.jpg

    1.1 (1).jpg

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

    1.1 (2).jpg

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

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

    2.jpg

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

    2 (1).jpg

    Сейчас уже не стоит ограничивать себя в количестве пунктов меню если их просто необходимо сделать больше 7 по смыслу. Не забывайте о здравом смысле. Разбивайте на более мелкие части контент, чтобы упростить восприятие. Тут же можно вспомнить о белом пространстве, иерархии за счет расположения и приближенности. Например, разбивка номера телефона +375 (29) 123-45-67.

    2 (2).jpg

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

    3.jpg

    Наше зрение воспринимает не отдельные линии, а готовые формы, поэтому следующие принципы можно назвать гештальт-принципами:

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

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

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

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

    4.jpg

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

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

    А также…
    Readability — Сервис readability.io позволяет проверить, насколько читаемым и простым для понимания получился напечатанный или опубликованный текст. Текст оценивается по балльной шкале и ее пересчету на возраст аудитории, которой будет удобно его читать. Уровень читаемости показывает не то, насколько комфортно читается тот или иной текст, а то, насколько высоким должен быть уровень его потенциального читателя.

    5.jpg

    Лучше всего мы различаем красный, зеленый, желтый, синий, черный и белый цвета (работа колбочек). А вот очень похожи для нас (а для дальтоников вообще одно и то же, а их 8% мужчин и 0,5% женщин) темно-красный, темно-синий, темно-фиолетовый, темно-зеленый и черный. Также близки светло-зеленый с белым, фиолетовый с синим и синий с любыми оттенками синего. Лучше таких сочетаний избегать.

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

    5 (1).jpg

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

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


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


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


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

    6.jpg

    Пользователь увидит только то, что ищет и зачем пришел. Поэтому если вы рассчитываете, что он придет покупать у вас ДИВАН, то четко и жирно в заголовках он должен вдеть именно это слово.

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

    6 (1).jpg

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

    7.jpg

    Представьте, если бы вы задумывались над тем, как нужно напрячь мышцы, чтобы сделать очередной шаг. Вы бы тут же забыли, куда вообще идете и замедлились бы. А чего хуже так и повалились бы. НО этот процесс у нас доведен до автопилота. Также и вы доводите процессы пользователя до автопилота. И пожалуйста, СЧИТАТЬ никогда не заставляйте. Например, ввод года рождения — не просите вводить возраст (не только свой, иногда действительно сложно посчитать).

    7 (1).jpg

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

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

    8.jpg

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

    8 (1).jpg

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

    8 (3).jpg

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

    8 (4).jpg

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

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

    8 (5).jpg

    Он должен чувствовать: чуть что — ему кто-то поможет (предположительно сама система), чтобы он не боялся ошибаться и вообще пользоваться вашим ресурсом.

    9.jpg

    Пользователь и система — фактически это общение в одну сторону, от пользователя. Это быстро его утомит. Давайте ему обратную связь, сигналы. Если пользователь произвел клик, то интерфейс должен как-то отозваться, чтобы человек понял, что клик ПРОИЗОШЕЛ.

    9 (1).jpg

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

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

    10.jpg

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

    Индикаторы должны соответствовать реальности. В случае индикатора прогресса следует показывать реальное оставшееся время, а в случае индикатора загрузки хотя бы не шевелиться, когда процесс реально встал. Например, у Apple он крутится медленнее при медленном соединении. Индикаторы должны показывать, сколько сделано из общего количества. Плюс, именно сделано, а не осталось – какой-никакой, а позитив (кроме времени, понятно – там нужно понять именно оставшееся его количество). С 0% не начинайте – растревожите пользователей, если надолго застрянет на нуле.

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

    11.jpg

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

    Помните о доступности.

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

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

    11 (1).jpg

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


    Поделиться ссылкой:

    НЕ ПОТЕРЯЙТЕ СВЯЗЬ С НАМИ

    файл не найден
    apostrof-form.png


    КОНТАКТЫ
    info@apostrofsoft.com
    +37529607-67-46
    +37529619-94-17 (тех. поддержка)
    УНП 691849929
    Надежные технологии "АпострофСофт" — Полный цикл разработки веб-проектов и мобильных приложений.
    УСЛУГИ
    Сайты
    Мобильные приложения
    Веб-разработка
    Проектирование
    Дизайн
    Сопровождение

    ТЕХНОЛОГИИ
    JAVA
    .NET
    PHP/JavaScript
    Мобильные технологии

    КОМПАНИЯ
    • Об ApostrofSoft
    • Услуги
    • Наши работы
    • live
    • Контакты
    APOSTROFSOFT.COM
    © 2016 ЧУП "АпострофСофт"
    The text is translated using Google translate.