Индикатор пользователя что это
Важен ли для вас индикатор уведомлений?
Евгений Вильдяев
Бывает, общаешься с другими людьми и узнаешь, что какие-то функции в смартфоне, которые для тебя совершенно несущественны, бывают очень важны для кого-то еще. Одна из таких функций — световой индикатор.
Сам я почти не обращаю внимания на эту функцию, есть индикатор — хорошо, нет — и Бог с ним. С чем это связано? Дело в том, что производители почти перестали устанавливать качественные большие световые индикаторы в смартфоны, это просто какой-то кошмар. Вместо большого хорошо различимого «кружочка», какой был в Samsung Galaxy S3, устанавливают малюсенькие, еле различимые «точки», которые и в темноте-то еле разглядишь.
Другая проблема в световом индикаторе — его реакция на все уведомления от приложений. Бывает, что пришло какое-то малоинформативное сообщение, например, информация о том, что приложения из Google Play готовы к обновлению или уже обновились, а индикатор всё равно мигает. У меня смартфон всегда лежит рядом с компьютером, поэтому постоянно мигающий светодиод изрядно раздражает.
Или возьмем другой пример: вы ставите устройство на зарядку на ночь и ложитесь спать. Разумеется, в тёмной комнате индикатор будет гореть красным или зеленым! Конечно, можно установить приложение Flow и попытаться самостоятельно настроить его работу, но, по отзывам моих знакомых, данная программа далеко не на всех смартфонах корректно работает.
Но мое мнение разделяют далеко не все пользователи, например, мой приятель, наоборот, очень ценит наличие индикатора, говорит, что за день приходит много уведомлений, он не всегда фиксирует их, а когда видит мигающий диод, сразу понимает, что есть пропущенное сообщение или звонок.
А как вы относитесь к этому небольшому, но важному элементу в смартфоне? Критично ли его наличие или, наоборот, вы по возможности стараетесь его отключать? Кстати, из интересных решений по части индикатора могу привести в пример Umi IRON Pro, в котором этот элемент перенесли вниз.
Это приложение добавит индикатор уведомлений в ваш Android-смартфон
LED-индикатор является одной из самых недооцененных функций смартфона. Он позволяет с удобством отслеживать звонки и сообщения, которые остались без ответа, без необходимости активировать дисплей. Достаточно всего лишь бросить взгляд на фронтальную панель аппарата, которая периодическим миганием подскажет о пропущенных событиях, которые могут вашего непосредственного внимания. Впрочем, многие производители пренебрегают индикаторами и тогда пользователям приходится самим решать эту проблему.
Оказывается, оснастить индикатором событий можно любой смартфон с AMOLED-экраном. Для этого не понадобится оперативное вмешательство с последующим внедрением вспомогательных компонентов. В это сложно поверить, но с этой задачей прекрасно справится небольшое приложение из Google Play под названием NotifyBuddy.
Чем заменить Always-On Display
Как мы указали выше, оно работает только на смартфонах с AMOLED-дисплеями. Дело в том, что только такие матрицы могут подавать напряжение на отдельные пиксели, не зажигая весь экран целиком. К слову, именно благодаря этой особенности органических панелей они поддерживают режим Always-On Display, который позволяет в режиме реального времени отображать время, день недели и другую информацию.
В отличие от режима Always-On Display, NotifyBuddy не выводит на экран никакой информации, а всего лишь заставляет загораться несколько пикселей, имитируя работу LED-индикатора. Удивительно, но индикация выглядит настолько реалистично, что никто не сможет усомниться в том, что ваш смартфон оснащен соответствующей лампочкой.
Подпишись на наш канал в Яндекс.Дзен. Там ежедневно выходят эксклюзивные материалы, которые не попадают на сайт.
Приложение: NotifyBuddy — AMOLED Notification Light
Разработчик: XanderApps Категория: Персонализация Цена: Бесплатно Скачать: Google Play Приложением уже заинтересовался: 1371 человек
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Уже давно в Сети обсуждают вероятность блокировок сервисов Google в целом и YouTube в частности. Заблокируют или не заблокируют, а если заблокируют, то будет ли можно обойти блокировку? Такие вопросы теперь задают друг другу пользователи, которым эта тема интересна. Мы-то, конечно, знаем, что никто ничего блокировать не собирался, даже если такую инициативу обсуждали на самом верху. Но все так увлеклись темой гипотетической блокировки YouTube, что совсем забыли обо всём остальном.
Состояния интерфейса: первый экран, индикатор загрузки и сообщения об ошибках
Советы дизайнера Tinder
Дизайнер и менеджер по продукту 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) повторяет попытку. Теперь нам повезло: сообщение отправлено. Красный значок пропадает, и мы видим индикатор доставки.В реальном мире
Вы увидели множество пяти состояний интерфейса, а также плавные переходы между ними в действии. Без этих переходов мы рискуем вызвать у пользователя замешательство или удивление тому, что состояния внезапно появляются и исчезают. Это явно не входит в нашу работу, правда?
Для отображения всех этих состояний нужно тесное сотрудничество дизайнеров и разработчиков продукта. Уделите время каждому состоянию, чтобы создать целостный интерфейс.