Содержание
- 01. Хотите 120 яиц с этим?
- 02. Измените номер телефона, чтобы пользоваться нашим сервисом.
- 03. Как сказать "переключить язык" на китайском?
- 04. Когда прояснение затемняет
- 05. Можем ли мы уместить здесь что-нибудь еще?
- 06. Смерть из раскрывающегося списка
- 07. Ожидание
- 08. Что сказать?
- 09. Прореживание содержания.
- 10. Как вам не стыдно!
Хороший дизайн пользовательского интерфейса улучшает общий пользовательский опыт. Он делает взаимодействие пользователя с приложением или сайтом простым, интуитивно понятным, эффективным и плавным, настолько, что вы, когда оно работает хорошо, пользователь может даже не заметить его.
Многие команды ценят очевидную простоту списков Trello для управления своими конвейерами, поклонники фэнтези-спорта могут засвидетельствовать легкость усвоения огромного количества информации в приложении ESPN Fantasy Sports, а гладкие линии и цветовые палитры Artsy создают отличный дизайн для Маленькие карманные устройства выглядят легко.
Но когда что-то идет не так, люди действительно замечают это. Плохой пользовательский интерфейс может отговорить или напрямую помешать пользователям продолжать работу. Десять ляпов внизу, некоторые смешные, а некоторые просто раздражающие, могут научить нас чему-то, даже если этого следует избегать.
Следует также отметить, что плохой пользовательский интерфейс также часто связан с отсутствием тестирования - см. Наш список лучших программ для пользовательского тестирования, где представлены наши любимые инструменты тестирования.
- 34 инструмента веб-дизайна, которые помогут вам работать эффективнее
01. Хотите 120 яиц с этим?
Основой дизайна пользовательского интерфейса является выбор правильного инструмента для работы, что обычно означает соблюдение существующих соглашений и использование элементов управления способом, с которым пользователи уже знакомы. Так что, возможно, вы тренируетесь, как Рокки Бальбоа, и действительно хотите добавить в свой заказ необычайное количество яиц, но не помеченных флажками? Легенда, похоже, запрещает заказ 120 яиц, потому что, конечно, это было бы смешно, но тот факт, что они должны были сказать это, показывает, что, возможно, был использован неправильный инструмент.
Что, если бы я сказал вам, что есть лучший способ разработать этот интерфейс? pic.twitter.com/tvxeluJF9N13 мая 2019 г.
Узнать большеФлажки используются, когда мы можем отметить более одного варианта, и переключатели, когда разрешен только один выбор, хотя, возможно, здесь кнопка «плюс» и «минус» могла работать лучше. В любом случае, мы еще больше разочарованы тем, что на заказ 15 яиц нет скидки.
02. Измените номер телефона, чтобы пользоваться нашим сервисом.
Бывают случаи, когда вы можете захотеть обслужить исключительно пользователей из одного географического региона с его собственными определенными соглашениями о форматировании, но веб-сайт авиакомпании, работающей из нескольких международных аэропортов, вероятно, не входит в их число. В этом примере от канадской Flair Airlines, если вы из страны, где номера телефонов содержат более или менее 10 цифр, у вас нет другого выбора, кроме как ввести ложный номер. Хотя, поскольку поля для кода страны нет, они все равно не смогут вам позвонить.
При разработке пользовательского интерфейса для всего, что будет иметь - или может получить - пользователей из нескольких регионов, убедитесь, что использование не ограничено местными соглашениями об именах и нумерации. Адаптируйтесь к пользователям, а не заставляйте их адаптироваться к вашему интерфейсу.
03. Как сказать "переключить язык" на китайском?
Итак, вы заходите в Интернет во время заграничной поездки, и вас встречает что-то вроде этого. Куда вы смотрите в первую очередь? В правом верхнем углу? Здесь пусто. Верхний левый? Неа. Третье предположение может заключаться в том, что вы прокрутите страницу вниз до конца в поисках чего-либо, похожего на раскрывающееся меню, и в этом случае вы найдете параметр языка. Но учитывая, что изменение языка - это первое, что вы захотите сделать, если попадете на сайт, который не можете читать, вероятно, имеет смысл сделать эту опцию как можно более легкой для поиска и в идеале выбираемой. перед выполнением любых других действий, таких как вход в систему.
Значок земного шара или значок языка, разработанный Фархатом Даттой, могут помочь людям найти вариант. Что бы вы ни делали, просто не используйте флаги для обозначения языков, если только вы не хотите расстроить очень много людей.
04. Когда прояснение затемняет
@Homeburger, это ломает мне мозг; снимите флажок "Нет салата", чтобы удалить салат. Так что отметили "Нет салата означает салат?" pic.twitter.com/1Z3vt8lR1U 12 марта 2019 г.
Узнать большеМы все прекрасно привыкли отмечать флажки, чтобы добавлять что-то, и щелкать флажками, чтобы сказать, что мы не хотим чего-то, никоим образом не выходит за рамки нас, поэтому, на первый взгляд, не должно быть много места, чтобы испортить это, но здесь попытка Хомбургера объяснить этот процесс просто сбивает нас с толку. Вы должны снять отметку с того, чего не хотите, чтобы не получить? Остерегайтесь двусмысленности, но также остерегайтесь попыток ее избежать, которые только усложняют ситуацию.
05. Можем ли мы уместить здесь что-нибудь еще?
Нет ничего лучше загроможденного интерфейса, чтобы с самого начала заставить пользователя почувствовать, что его ждут болезненные ощущения, и, к сожалению, нет недостатка в примерах крупных игроков с чрезмерно загруженным дизайном пользовательского интерфейса, который режет глаза и занимает слишком много времени для навигации. .
Мало кто оплакивает смерть iTunes от Apple, в то время как многие крупные интернет-магазины (в том числе Amazon) по-прежнему бросают все, а кухню выливают в их витрину, что вряд ли облегчает навигацию. Даже применение теории цвета и разумное использование контраста мало что может сделать для того, чтобы чрезмерно загроможденный интерфейс выглядел более привлекательно, поэтому не забудьте урезать его. Но не заходите слишком далеко, есть опасность впасть в другую крайность - абсолютный минимализм. Все еще нужно найти варианты.
06. Смерть из раскрывающегося списка
Все ненавидят раскрывающиеся списки, поэтому, возможно, странно, что некоторые дизайнеры пользовательского интерфейса до сих пор этого не осознают. Когда дело доходит до заполнения онлайн-форм, есть несколько вещей более разочаровывающих, чем необходимость найти свою страну, если она находится в конце списка, или выбрать год своего рождения, а не просто ввести его, что просто кажется извращенной формой пытка для молодых и старых, и та, которая вряд ли помешает кому-то совершить ошибку.
Этот пример от Бодена, по крайней мере, развлекательный, хотя и немного сбивает с толку тех, кому не хватает модного названия - мы не замечаем варианта Mx. Возможно, более широкий урок из этого примера состоит в том, что иногда вам нужно остановиться и спросить, необходимо ли это вообще? Просто пожалей всех командиров крыльев, которым приходится прокручивать список до конца.
А если вы хотите узнать больше о разработке форм, прочтите наш пост о 6 шаблонах форм и о том, когда их использовать.
07. Ожидание
Анимация и новые способы взаимодействия были провозглашены способом создания восхитительных впечатлений, но давайте позаботимся о том, чтобы они не стали поводом для дизайнеров. Помните, что, хотя внешний вид и ощущения важны, ядро отличного пользовательского интерфейса - это функция: даже такая невинная анимация кнопки «Нравится» в Twitter вызвала язвительность за то, что раздражает и по-детски раздражает, а игривый значок загрузки может вызвать улыбку в первый раз , люди будут его ненавидеть, если им придется смотреть это слишком часто.
Любое ненужное взаимодействие, которое создает трения при использовании пользовательского интерфейса, может быть столь же утомительным. На выставке iFly50.com от KLM представлены 50 туристических направлений, на которых есть отличные изображения, но действительно ли кто-то собирается удерживать кнопку в течение нескольких секунд каждый раз, когда ему требуется дополнительная информация? Избегайте добавления трений, если только цель не состоит в том, чтобы оттолкнуть пользователей от выполнения действия.
08. Что сказать?
Привет, @teamweek, твой новый мятный цвет выглядит круто, но из-за него твоя кнопка становится нечитаемой с белой этикеткой. Требуется исправление пользовательского интерфейса! #usability pic.twitter.com/ih1n8no7s710 января 2018 г.
Узнать большеЯркие и даже флуоресцентные цвета стали своего рода трендом в пользовательских интерфейсах, и они могут быть очень эффективными в том, чтобы контент выглядел резким и выделялся, но помните, что текст должен быть читабельным. Мятно-зеленый цвет Teamweek выглядит забавным, но прочитать белый текст на мятно-зеленой кнопке непросто.
Цвет - не единственная причина плохой читаемости. Тенденция к снижению контрастности может быть проще для глаз, но это не поможет, если вам придется напрягаться, чтобы читать шрифт, в то время как хорошие шрифты и невосприимчивые сайты также могут повредить глазам пользователей. Текст проверки легко читать, и проверьте, что его можно прочитать на разных устройствах.
А если вы ищете шрифт своей мечты, не пропустите наш список бесплатных шрифтов.
09. Прореживание содержания.
Неужели кто-то действительно захочет вдаваться в подробности «о нас», «наших ценностях» И «нашей миссии»? В глазах компании это могут быть отдельные концепции, но маловероятно, что пользователь захочет перейти к одному из них конкретно, и зачем заставлять пользователя делать пять щелчков мышью, чтобы получить всю историю? Этот пример из The Grit сразу выглядит как тонкий контент, который лучше было бы объединить, иначе пользователь не сможет его прочитать.
10. Как вам не стыдно!
Подтверждение стыда невелико и неразумно. Этот пример из Paleo Flourish - один из наиболее агрессивных в тенденции пристыдить модальные окна веб-сайтов. Иногда это можно сделать в юмористической манере, но в целом оскорбление вашей целевой аудитории, принуждение ее к выбору между «Продолжайте тогда» или «Нет, я предпочитаю оставаться грустным, одиноким, неудачником, спасибо» - это не способ чтобы выиграть их раунд.
