UX-дизайн: 50 вещей, которые вы наверняка забыли сделать

https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914
  • Перевод
«Я не злюсь, я просто разочарован.»
— PM

image


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

Представляем вам чеклист из 50 пунктов для самопроверки. Вот примерные подразделы:

  1. Логин и регистрация
  2. Первый опыт
  3. Важные детали
  4. Запуск
  5. Профиль
  6. Безумные потоки



Логин и регистрация


1. Заставка
Экран, который появляется при запуске мобильного приложения или при входе в веб-приложение и все загружается.

image


Вот красивый вариант от Джеймса Джексона.

2. Поток забытых паролей
Это было «abcd1234» или " 1234abcd”? Это важно. Не забывай об этом.

image


Majo Puterka не оставляет своих пользователей запертым около дома под дождем.

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

image


Что дальше? Спросите Хейли Каттлин.

4. Приветствующие письмо
Это возможность создать первое впечатление и задать тон общения с пользвателями. Примите это в расчет.

image


Мне действительно это нравится. Брайан Голатка.

5. Условия предоставления услуг и конфиденциальности (тьфу)
Помогите людям действовать в рамках закона.

image


Я очень ценю, как Марко Прлич пытался сделать условия и конфиденциальность более доступными.

Первый опыт


6. Onboarding, первый контакт с пользователем
Есть куча разных способов, которые вы можете использовать. Вот пять моих фаворитов Onboardibg`а.

image


Восхитительно полезно, MuNa.

7. Подсказка, если пользователь что-то забыл
Это как переехать в дом без мебели. Выглядит довольно пустым, да? Помогите пользователям, подтолкните в правильном направлении. «Поместите сюда диван.»

image


Я чувствую, что Вели-Йохан Вероманн любит супергероев.

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

image


Майя Гао очень полезна. Будь как Майя.

9. Стандартный пользовательский интерфейс Изображения/Аватары
Регистрация с помощью социальных аккаунтов или сервисов, таких как Gravatar, действительно помогла нам продемонстрировать ваши улыбающиеся лица, но вы все равно получите того парня, который никогда не захочет загружать фото профиля. Дайте ему немного красоты и продемонстрируйте бренд.

image


Hermes Strange делает милый материал. Это симпатичные аватары.

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

image


Я предполагаю, что Кристофер, вероятно, украл обеденные деньги Хенрика. Пусть он выйдет и покинет сцену.

Важные детали


11. Футер приложения
Большую часть времени я думаю, что страницы могут продолжаться вечно, также, как люди верили, что мир плоский, и просто продолжали идти. Примечание: Земля не плоская.

image


Эш Швейцер может быть потерян где-то в лесу. Кто-то поможет ей.

12. Favicon (значок в браузере)
Знаешь… ту маленькую иконку, которая появляется на вкладке браузера. Я постоянно теряю вкладки с Medium, потому что значок больше не зеленый. Но это красиво.

image


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

13. 404 Страница
Ризван застряла в этой дыре. Пойдите ей помочь.

image


[Большая статья на Хабре про 404 страницы]

14. Состояния кнопки по умолчанию/при наведении/фокус/при нажатии/отключена/и т.д.
Тьфу, столько состояний. “Фокус + Наведение” мог быть самым моим любимым/неясным. Скриншот ниже взят тут: UX Power Tools Design System.

image


15. Порядок перехода по нажатию Tab
Порядок перехода — это специальная возможность, которая позволяет пользователям перейти на страницу с помощью клавиши Tab. Я не мог найти изображение, чтобы показать это, поэтому я сделал скриншот спецификации Christian Beck 2007 года, где он определил правила табуляции для каждого элемента управления пользовательского интерфейса в таблице. Фактически вы можете определить порядок, в котором элементы посещаются, чтобы расставить приоритеты, что первично, что вторично. Это непростая задача дизайна.

image


Дни написания 80-страничных спецификаций и разработка по методике «Водопада».

16. Поведение при скроллинге
Не только где и как прокручивается, но что на самом деле прокручивается. Заголовок фиксированный? Футер?

image


Питер Блейзи, это выглядит гладко. Круто.

17. Кнопка Intercom
Я имею в виду меньшее, что вы можете сделать, это сделать сочетания цветов в вашем приложении.

image


Проще, чем Доширак заварить.

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

image


Боронда проделал хорошую работу. Люблю этот желтый, Борунда.

19. Курсоры
Кнопки должны иметь курсоры. Неинтерактивный материал должен иметь курсор по умолчанию. Текст должен иметь текстовый курсор. Разработчики не всегда это знают. Я просто на днях видел приложение, где при наведении на кнопку был текстовый курсор. О боже.

image


Джефф Бродерик любит нажимать на вещи. Он также сделал халяву.

20. Таблица сортировки/фильтра/механизмы поиска
Должен быть более быстрый способ добраться до ZZ Top в таблице данных «Bands with Beards».

image


21. Пустые состояния «без результатов”
Иногда вы будете искать что-то или добавите слишком много фильтров, и не получите никаких результатов. Как грустно. Развеселите своих пользователей дерзкими иллюстрациями. Или вашим банковским счетом и номером маршрута.

image


Райнер Уэндланд попробовал все для Zendesk.

22. Состояние ошибки
Неправильный ввод. Неправильный пароль. Существующий аккаунт. Слишком много вещей выбрано. Есть много вариантов, когда что-то может пойти не так, особенно если ты бабушка и ты получила iPad на Рождество. Это была ошибка.

image


Майк Стезицки действительно заставил меня думать, что письмо отправлено.

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

image


Это взято с Google Inbox. «Отменить» действительно удобно, когда вы «случайно» удаляете письмо от своей мамы.

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

image


По-видимому, у Джурриана ван Друнена уже нет «Бра» в его контактах. Наверное, это к лучшему.

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

image


Не лучшая формочка, XPLAI. Продолжай практиковаться. Но это все еще болезненно восхитительно.

Запуск


26. Чертова иконка приложения
Да, наверное, лучше не забывать об этом.

image


27. Изображение для App Store

image


Даниэль Бир не забыл сделать изображение для App Store. Дай пять, чувак.

28. Картинка для соцсеточек и Open Graph
Это изображение, которое появляется, когда вы кидаете ссылку в Twitter, публикуете сообщение на Facebook, размещаете ссылку на Medium и т.д.

image


Вот как это выглядит на Medium:

image


29. Картинка для Website Marketing
Все хотят быть похожим на Stripe, поэтому тупо копируйте:

image


30. Изображения для Sales Deck
Sales deck — »это набор слайдов с инфографикой и продающим контентом".
Возможно придется от многого отказаться и очистить контент, чтобы выглядеть как бренд, совершающий сделки на 6-значные суммы.

image


31. Изображения Pitch Deck
Как изображение для Sales Deck, но немного более дальновидное. Я имею в виду… вы пытаетесь собрать деньги. Вы поймете позже.

image


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


32. Изображения для Product Hunt
Эй, они просто обновили страницы профиля.

image


33. Изображения рекламы в Facebook/Twitter
«Но у нас нет рекламы в Facebook.» Ха, пока не появится. И тогда никто не скажет вам. Просто сделайте картинки заранее и вы будете спокойны.

image


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

image


35. Email баннер

image


Тройные точки/запятые (прим. пер. намек на миллиард), если вы сделаете это иллюстрацией.

^ кстати, это рассылка моего агентства и мои коллеги пишут некоторый действительно выдающийся контент.

Вот некоторые последние фавориты:

image



image


Профиль


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

image


Slack не стал компанией стоимостью в 8 миллиардов долларов, забивая на настройки уведомлений. Успешно справился.

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

image


Я не знаю, что это значит, но добраться сюда было легко.

38. Опция «Удалить мой аккаунт»
Да, да, я знаю. Никто этого не делает. Но, может, они снова создадут новый аккаунт? Как мы говорим продавцу: «Я вернусь позже и куплю три.» Ну да, конечно.

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

image


Тссс, Mr. President, вы можете отключить свою учетную запись здесь.

39. Инструмент для обрезки фотографии профиля
Это кошмар для большинства приложений, но можно сделать по уму.

image


40. Опция/поток «Обновление моего аккаунта»
Страшно подумать, насколько это сложно для многих продуктов SaaS. Заткнись и возьми мои деньги. Разве это не должно быть легко? Это должно быть проще простого.

image


Буфер имеет пункт меню для обновления, довольно простую форму. У тебя есть мои деньги.

Безумные потоки


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

image


Дхавал С. Ганди хочет убедиться, что его Алоэ Вера отправлен в нужное место.

42. Поток «Добавить кредитную карту»
Некоторые люди (типа меня) любят хранить около ста кредитных / дебетовых карт в файле, чтобы воры имели множество учетных записей на выбор. Поэтому упростите добавление карт. Это все, что я должен сказать об этом.

image


43.Поток «массового добавления»
Одно дело быстро добавить объект в систему, но совсем другое — сделать так, чтобы быстро добавить группу объектов в систему.

image


Пожалуйста, сэр, разрешите еще?

44. Поток «Создание пользовательского фильтра»
Если у вас есть сложная система фильтров, возможно, было бы неплохо добавить возможность сохранить профиль фильтрации на потом. Вам больше не нужно щелкать миллион раз.

image


Oykun Yilmaz может сделать этот шаг дальше, позволяя пользователю сохранить этот фильтр. Сделай это, Oykun.

45. Поток «Добавить в корзину»
Забавно, но есть люди, которые забывают об этом потоке. Это я.

image


Видимо, Альберто Конти нужны 4 стула, 4 тумбочки. Должно быть, большой дом…

46. Поток «Поделиться»
Расшаривать стало привычным делом, но не факт, что для вас есть готовый вариант. Это повод заняться разработкой.

image


Томек Квятковский действительно знает, как стать социальным.

47. Поток «Создать из существующего»
Это вроде как «создать копию + редактировать» все в одном действии. Пользователь может стартовать с существующего варианта и улучшать его по мере необходимости.

image


Кайл Джонстон пишет много сценариев. Может быть, тайно Кристофер Нолан?

48. Поток «Пригласить кого-то»
Нет лучшего способа добавить «вирусность» к вашему продукту, чем через приглашения и расшаривания. Берите пример с Dribbble.

image


Я думаю, что Паула Пинтарик и Кристина отправляются в рейс. Или они работают над проектом и смотрят, как летают другие люди. Это еще хуже.

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

image


Мэтт Швери, с другой стороны… гораздо меньше надоедлив, чем Грэг.

50. Поток «Удалить и восстановить»
Иногда вы удаляете что-то супер важное и нужно немедленно его восстановить.

image


Эрик Цай понимает, что мы все ошибаемся.

51. Может мы о чем то забыли? Пишите в комментариях.



Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается разработкой приложений и сайтов на PHP для крупных заказчиков, а так же разработкой облачных сервисов и мобильных приложений на Java.
Edison 379,24
Изобретаем успех: софт и стартапы
Поделиться публикацией
Комментарии 33
  • +4
    13. 404 страница. Мне не нужны дизайнерские фантазии. Мне нужно поле «найти на сайте» (ссылка протухла, видимо — материал перемещен, и я хочу его найти) и ссылка «На главную». Всё.

    2. Неужели так сложно при нажатии «Вспомнить пароль» запоминать e-mail и подставлять его в это поле? Нигде еще такого не видел, и всегда приходится набирать дважды.
    image
    • +3
      Также жутко раздражает сообщение «e-mail ИЛИ пароль не верен», ну разве так сложно написать, что именно не верно… Ведь эта информация всё равно общедоступна, достаточно нажать на «забыл пароль».
      • +1
        Да черт его знает. Лично у меня на проектах при нажатии на «забыл пароль» писалось «если данный имейл действительно существует...» и определить есть он или нет в БД думаю что как минимум сложно.
        PS: Правда почта сохранялась при неверном пароле и двигалась обратно на форму логина.
        • 0
          Но ведь при нажатии на «забыл пароль» и вводе неверного имейла сообщение о его неверности выводится, никаких проблем вроде бы нет. Так почему бы не мучить пользователя и не вывести сразу.
          • 0
            Нет. Дословно выводится «Если вы регистрировались на нашем сайте по данному имейлу, вам пришло письмо с кодом».
            • +5

              Чтобы нельзя было узнать о факте наличия email в БД. Это может зависеть от проекта, но не надо думать, что список пользователей всегда является публичным, как и primary email (сходу примеры GitHub, Linkedin).

              • +1
                Может это я где-то сохранил свой майл, но браузер у меня сам выдает подсказу и набирать майл еще раз не нужно.
                Плюс чтобы это начало раздражать — нужно каждый день сбрасывать пароль )
                Кстати, еще это объясняетя тем, что в разделах входа и восстановления пароля может еще не быть сессии, чтобы передать логин в другую форму.
                • +1
                  Чтобы это начало раздражать — достаточно, чтобы этот косяк был у большого количества сайтов.
            • 0
              Чтобы при подборе пароля злоумышленником, было не понятно, а точно ли есть аккаунт с таким email?
              • +1
                А зачем? Разве не для этого и существует пароль? Все-равно большинство людей
                регистрируются не более чем на несколько емейлов, которые можно найти. В итоге это не создает проблем для злоумышленника, но создает проблемы для пользователя.

                Защита должна быть в пароле (а если необходима еще более серьезная — двухфакторная авторизация), а эта идея про «не понятно, есть ли емейл» — больше похоже на прятание головы в песок, такое же безсмысленное, а может даже вредное в силу ложной безопасности.
                • +1
                  Ну почему? Вот вы получили адрес почты «нужного» вам человека и начинаете собирать образ по крупицам — проверили на одном сайте, проверили на втором — уже можно собрать информацию для атаки основанной на социнженерии.
                  Например: Моя мама спокойно поведется на СМС с надписью «На таком-то популярном сайте (ВК/Ютуб) разыгрываются призы. Отправьте СМС ХХ на номер ХХХ и вы...».
                  Так как основной контингент моих сайтов — ученые за 40 (у них своеобразное мышление), я пытаюсь избежать таких, казалось-бы глупейших, лазеек и не вижу в этом зазорности.
                  • +1
                    «На таком-то популярном сайте (ВК/Ютуб) разыгрываются призы. Отправьте СМС ХХ на номер ХХХ и вы...».

                    А такая атака будет успешной даже если ваша мама зарегистрирована на ВК под другим емейлом (у моей мамы вот регистрация там еще на емейле от рамблера, но если ей придет такое сообщение на гмейл аккаунт — она ничего не заподозрит), так что совершенно не аргумент.

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

                    Вы как в том анекдоте про швабру:

                    Пожилая еврейская пара готовится ко сну.
                    — Изя, ты закрыл калитку?
                    — Закрыл, Соня, закрыл.
                    — А дверь ты закрыл?
                    — И дверь закрыл.
                    — А на английский замок?
                    — И на английский замок, Соня.
                    — А на бельгийский?
                    — И на бельгийский закрыл.
                    — А на засов?
                    — И на засов закрыл, Соня.
                    — А на цепочку?
                    — И на цепочку тоже.
                    — Изя, а швабру ты подставил?
                    — Ой! Швабру, кажется, забыл.
                    — Ну вот! Заходи и бери, что хочешь!


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

                      Да, но если моя мама там не зарегистрирована вовсе — она заподозрит неладное.


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

                      Ваше право это воспринимать именно так. Мое право это воспринимать по другому.


                      Но швабру надо поставить, потому что бабушка так делала.

                      А вы не находите что показывать сообщение "данный имейл у нас отсутствует" и есть это самое действие бабушки, которое вы повторяете? (:

                      • +1
                        Да, но если моя мама там не зарегистрирована вовсе — она заподозрит неладное.

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

                        А вы не находите что показывать сообщение «данный имейл у нас отсутствует» и есть это самое действие бабушки, которое вы повторяете? (:

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

                          Мой первый комментарий в этой ветке был именно про это.


                          Ваша «атака» — она имеет слишком много «если» и слишком мало «зато», чтобы рассматривать ее серьезно.

                          Может быть.


                          На всех сайтах, блин. И совершенно бессмысленно!

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


                          Желающие этого избежать используют более одного емейла.

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

                          • +1
                            только корпоративный и на него зарегистрировано все, от ВК до аккаунта в научных журналах.

                            Классическая ситуация. И тогда подобная «мера защиты» совершенно бессмысленна
                            • +1
                              Не соглашусь. У таких людей имейлы выложены в публичный доступ + куча визиток на руках — отличное поле для начала атаки.
                  • +1
                    Можно просто таким образом собирать базу имейлов
                    • +1
                      Есть значительно более простые способы собирать базу имейлов.
                      Тем более для того, чтобы какой-то емейл проверить — его необходимо иметь. Не проще ли просто послать письмо, чем использовать сомнительный способ проверки на одном из сайтов?
                      • +1
                        Не проще ли просто послать письмо, чем использовать сомнительный способ проверки на одном из сайтов?

                        Дело не в проверки самой почты. Дело в составлении портрета пользователя по его регистрациям на различных сайтах.

                        • 0
                          Желающие этого избежать используют более одного емейла.
                • +1

                  Например, у меня на сайте 2 профиля:


                  login1: superman
                  pass: qwerty


                  login2: batman
                  pass: 000000


                  Я запутался и ввел:
                  superman
                  000000


                  Может я ошибся паролем, а может и логином. Под каким профилем я хотел авторизоваться? Это только я могу знать.

              • +4
                Ужасный, кошмарный перевод, сплошные кальки с оригинала.
                Поток «Удалить и восстановить»
                Вы знаете, когда вы удаляете что-то супер важное и нужно немедленно его восстановить? Нет? Хорошо.

                А это просто позорище.
                • –1
                  Это выглядит слишком реально, Карлос Медина. Не имею отношения, я только что купил некоторые новые туфли, и это не стоило ни копейки.
                • +3
                  В целом просматривая первые 10 пунктов составил список «5 максимально бесящих меня вещей в любом приложении».
                  Дальше даже не читал, чтобы не расстраиваться. Кому-то это, конечно, нужно, но не 90% опытных юзеров.
                  • +1
                    Что интересно, дальше заметно приятнее пункты, даже реально полезные вещи, которые мало кто делает. :) А разгадка проста: первые пункты по велению маркетоидов направлены на удержание юзера, это ж везде ощущается, где с юзера надо стрясти денег.
                  • +2
                    А почему это называется «поток»? Case так перевели или это новый термин?)
                  • –1

                    Полезно, но… степень ужасности этого перевода превышает все допустимые пределы.

                    • +1
                      Не знаю, есть ли где-то такое, но очень хочется верить:
                      Заставка — нафиг сплэшскрины! Раз уж у вас такое тормозное приложение, что просто необходимо чем-то занять юзера, пока оно там кряхтит и грузится, то пусть это будет нечто полезное, скажем — последние сообщения, если это почтовый клиент; или тупо скриншот, сделанный последний раз перед выходом, если это карты местности. Суть — как в сериалах, «краткое содержание предыдущих серий», шоб контекст было комфортно восстановить. :)
                      • +1
                        Второй пункт тоже не ахти. Вот разве не очевидно, что если юзер нажал на «восстановить пароль», НЕ НАДО его переспрашивать почтовый адрес, надо просто отправить письмо! В ту же секунду! Ну и оповестить об этом, конечно. :)
                        • 0
                          какое-то месиво из гифок и невнятных примечаний к ним… Очень тяжело читать
                          • 0
                            Какой-то непонятный поток сознания (еще и криво переведенный), разбавленный непонятными картинками.

                            «Я не злюсь, я просто разочарован.»

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

                            Самое читаемое