Лого vc.ru

Состояния интерфейса: первый экран, индикатор загрузки и сообщения об ошибках

Состояния интерфейса: первый экран, индикатор загрузки и сообщения об ошибках

Дизайнер и менеджер по продукту Tinder Скотт Херф написал в своём блоге на Medium статью, в которой рассказал о пяти состояниях интерфейса и особенностях разработки каждого из них.

В рубрике «Интерфейсы» — перевод материала, подготовленный командой Faino Interactive для рассылки дизайнеров интерфейсов UX Fox.

Поделиться

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

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

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

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

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

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

Видите разницу в пользовательском опыте?

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

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

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

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

Множество состояний UI

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

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

Будьте честны с собой. Когда в последний раз вы разрабатывали страницу только с одним состоянием? Даже при создании приложения о погоде (распространенная шутка на Dribbble) одного состояния будет недостаточно.

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

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

Множество состояний интерфейса приложения обмена сообщениями. Переходы между страницами происходят плавно.

Пришло время немного вспомнить историю интернета. В 2004 году компания Basecamp, до этого известная как 37signals, опубликовала революционную для меня на то время статью The Three State Solution — «Решение трех состояний». И да, это не был план по решению израильско-палестинского конфликта.

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

Все меняется: сначала была революция AJAX, затем мобильные приложения. После них настала массовая ориентация на потребителя технологий, потребности и ожидания UI изменились. Давайте поговорим об идеальном состоянии.

Идеальное состояние

У Tinder одно из лучших «идеальных состояний». Много информации и фотографий, очень мило

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

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

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

Пустое состояние

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

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

Как сказал бы Джордж Такей, ну и ну

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

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

Первое взаимодействие

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

Мне кажется, это состояние похоже на известное в литературных кругах «Путешествие героя» из чудесной работы Джозефа Кемпбела Hero With a Thousand Faces («Герой с тысячью обличий»). Это основа сказочных историй всего мира и всех времен, начиная с «Одиссеи» и заканчивая «Звездными войнами». Вот в чем идея:

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

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

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

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

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

Facebook Paper постепенно представляет свои функции, обучая вас основным жестам

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

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

Теме погружения и первого взаимодействия можно посвятить книгу — и такая книга есть. Если вы хотите детально ознакомиться с этими понятиями, очень рекомендую прекрасную работу Самуэля Халика The Elements of User Onboarding («Элементы погружения в интерфейс»).

Очищенные пользователем данные

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

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

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

Хотя это и «винтажный» скрин iOS 6, он все же демонстрирует эффект отсутствия во входящих непрочитанных. Награда пользователя — выбранная вручную фотография кафе или заката, которой можно поделиться в Interwebz. При этом пользователь не только показывает свое достижение, но и рекламирует Mailbox. Тройное комбо!

Нет результатов

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

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

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

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

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

Состояние ошибки

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

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

Перефразирую Джефа Раскина, создателя оригинального Macintosh и автора The Humane Interface («Гуманный интерфейс»).

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

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

Всего хорошего, и спасибо за рыбу (Название романа британского писателя Дугласа Адамса — прим. ред.)

Нет! Да! Наверное?

Наконец-то внятное контекстное сообщение об ошибке. Небольшая шутка как бонус добавляет интерфейсу человечности.

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

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

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

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

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

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

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

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

Состояние частичной заполненности

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

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

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

Здесь вам могут пригодиться принципы дизайна видеоигр. Это не значит, что нужно заставлять пользователей делать что-то наподобие сбора кристаллов в Clash of Clans. Я предлагаю выстроить так называемое ускорение для достижения идеального состояния продукта.

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

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

Вот несколько хороших примеров состояния частичной заполненности.

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

Состояние загрузки

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

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

Это мнение Люка Вроблевски, эксперта в дизайне продуктов, который возглавлял команды eBay, Yahoo и Google. Он продал свой стартап Polar, мобильное приложение для голосования, и сейчас сотрудничает с Google.

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

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

Люк Вроблевски

Скелетная схема страницы

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

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

Приложение Люка Вроблевски Polar и его скелетные схемы загрузки

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

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

Оптимистическое предположение

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

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

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

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

Вы увидели примеры множества состояний UI отдельно друг от друга. Но как они будут работать вместе? Как отобразить в интерфейсе переходы между ними?

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

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

Итак, с чем нам предстоит работать в приложении обмена сообщениями?

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

Гипотетический пример

Допустим, Марти и Док обменялись номерами телефонов, и Марти хочет поведать Доку, что он только что увидел в супермаркете «Две сосны».

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

Что происходит после того, как сообщение отправлено? Нам необходимо плавно перейти от пустого состояния к состоянию частичной заполненности: это когда Марти отправляет только одно сообщение.

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

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

Что происходит, когда Марти хочет ответить? Сначала нам необходимо отобразить состояние, что в поле введен текст. Обратите внимание, как кнопка «Отправить» меняется с серого цвета (неактивная) на синий (активная). Затем мы видим другое состояние загрузки — иллюстрацию процесса отправки. В это время сообщение затемнено: неизвестно, успешно действие или нет, пока «Доставлено» не сообщит пользователю, что все в порядке.

Что происходит, если сообщение не доставлено? Тут пригодится наше состояние ошибки. Красный значок заменяет индикатор загрузки, и сообщение все еще затемнено. Нажатие на него (или в данном случае на прототип Quartz Composer) повторяет попытку. Теперь нам повезло: сообщение отправлено. Красный значок пропадает, и мы видим индикатор доставки.

В реальном мире

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

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

Краткое содержание

  • Не заостряйте внимание лишь на идеальном состоянии, не упускайте остальные. Ваш продукт решает задачи пользователей — необходимо учесть, каким образом все состояния страниц помогают им достичь цели.
  • Рекомендую прочесть The Elements of User Onboarding («Элементы погружения в интерфейс») Самуэля Халика.
  • Внедрите разработку состояний загрузки в этап прототипирования. Состояния — это часть интерфейса, их нельзя добавлять в последнюю очередь. Сотрудничайте с разработчиками, чтобы сделать работу продукта лучше — как с точки зрения пользователей, так и на самом деле.
  • Продумайте, на каких моментах могут возникнуть сбои и ошибки. Как их лучше отображать? Какая реакция продукта на них наиболее благоприятна? Здесь нужно достичь баланса между затратами и извлеченными выгодами. Попытайтесь хотя бы предусмотреть наиболее серьезные ошибки и любой ценой сохранить данные, введенные пользователем.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

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

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

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

0

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

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

0

Именно поэтому интерфейсу должно уделяться достаточно внимания, что бы выловить все косяки. Сбербанк - молодцы, что сделали весьма качественное и симпатичное приложение, но им есть ещё над чем поработать.

0

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

Автор не видел тиндера в глаза? — неправильный скриншот стоит.

0

Автор статьи работает в Tinder :)

0

Интересно, VC, вы сами-то статью читали? ;)

Крутая статья, но ей уже много времени)

0

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

Сейчас обсуждают
Андрей Малолин

Так начинающему или совсем без опыта работы?

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Константин Фанки

Что за Codewise? Кто нибудь слышал про них до этого рейтинга?

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
0
Den Neustroev

Складывается впечатление, что вы из Avito.

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
1
Gregory Golovanov

У нимакс вполне себе московский ценник

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
GaLL

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

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Показать еще