О чем вы могли забыть при разработке дизайна приложения
Мы все о чем-то забываем. Это не круто!
Но со всеми бывает. Этот список сделает вас лучше.
Это всего лишь список вещей, которые вы, возможно, забыли при разработке. Когда вы думаете о том, насколько простым является приложение, такое как Instagram или Snapchat, легко упустить из виду, сколько экранов, состояний и т. д. входит в потрясающий пользовательский интерфейс.
Войти и зарегистрироваться
1. Экран заставки
Экран, который появляется при запуске мобильного приложения или при входе в веб-приложение.
![by James Jackson](https://cloud.pllsll.ru/1366x/pollskill/storage/bc/10/18/ec2807ff52d.png)
2. Восстановление пароля
Было это «abcd1234» или «1234abcd»? Это важно. Не забывайте об этом.
![Majo Puterka](https://m.pllsll.com/pollskill/storage/43/5e/eb/286f3ea1769.gif)
3. Страница «Спасибо за регистрацию»
Обычно этот экран появляется после того, как пользователь создает учетную запись и говорит ему, чтобы он подтвердил свой адрес электронной почты
![Hayley Cattlin](https://cloud.pllsll.ru/1366x/pollskill/storage/97/7d/0a/bdafb369854.png)
4. Приветственное письмо на электронную почту
Это грань между дизайном продукта и маркетингом продукта, но это буквально первое впечатление, которое вы можете произвести на своих пользователей. Прекрасная возможность, представить в лучшем виде свой продукт
![By Brian Golatka](https://cloud.pllsll.ru/1366x/pollskill/storage/a0/36/67/4a418d41a50.png)
5. Страницы условия обслуживания, лицензионные соглашения, политика конфиденциальности.
Просто сделайте это для людей законным. И вы избежите подачи иска.
![Marko Prljic](https://cloud.pllsll.ru/1366x/pollskill/storage/3f/9b/3c/1fc0f0f3833.png)
Первый опыт
6. Пустые состояния
Это как переезд в квартиру, когда вы еще не перевезли мебель. Выглядит довольно пусто, да? Помогите пользователям, покажите им правильное направление "Место дивана здесь".
![Veli-Johan Veromann](https://cloud.pllsll.ru/1366x/pollskill/storage/60/8f/ff/4850aadaf31.png)
7. Аватар пользователя по умолчанию
Социальные аккаунты с фотографией действительно помогают показать наши улыбающиеся лица, но все равно найдется парень, который никогда не загружает фото. Дайте ему интересный аватар и продемонстрируйте оригинальность вашего бренда.
![Hermes Strange](https://cloud.pllsll.ru/1366x/pollskill/storage/fb/e3/07/1ad80dc5efd.png)
8. Кнопки выхода
Вы должны дать возможность пользователям уходить. Они могут использовать ваше приложение в публичной библиотеке, и они должны выйти, а то какой-нибудь незнакомец поменяет их имя на "господин Обухов". Неуместно.
![Henrik’s](https://cloud.pllsll.ru/1366x/pollskill/storage/1f/22/2c/86da9e5e95b.png)
Мелочи
9. Футер
Большую часть времени я думаю, что страницы продолжаются вечно, как люди, которые думают, что земля плоская. (Но она не плоская)
![Ash Schweitzer](https://cloud.pllsll.ru/1366x/pollskill/storage/63/b2/5d/9795a0b21de.png)
10. Фавикон в браузере
Вы знаете... этот маленький значок, который отображается на вкладке браузера. Это красиво!
![Michael Flarup](https://cloud.pllsll.ru/1366x/pollskill/storage/f2/15/52/47c0d62d87c.png)
11. 404 Страница
![Rizvan](https://cloud.pllsll.ru/1366x/pollskill/storage/a9/f8/6b/67383fde021.png)
12. По умолчанию, наведение, фокус, нажата, неактивная и т. д.
Тьфу, так много статусов
![www.uxpower.tools](https://cloud.pllsll.ru/1366x/pollskill/storage/44/73/9a/a50baeb9a9b.png)
13. Tab Order
Таb Order — это функция специальных возможностей, позволяющая пользователям перемещаться по странице с помощью клавиши TAB. Не удалось найти изображение для представления этого, поэтому я взял снимок экрана с миникаталогом Кристиан Бек из 2007, где он определил позицию табуляции в таблице для каждого элемента. Можно определить порядок, в котором будут посещаться элементы, чтобы обеспечить первичные действия перед вторичными. Это аккуратная задача проектирования.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/85/04/91/633c55b7659.png)
14. Поведение прокрутки
Проверить поведение страницы при прокрутке. Исправен ли заголовок? Футер?
![Peter Blazej](https://m.pllsll.com/pollskill/storage/ec/a0/fc/1107319c80b.gif)
15. Кнопка обратная связь
Я имею в виду, что наименьшее, что вы можете сделать, это сделать это в соответствии с цветами вашего приложения. Пойдемте, ребята. Это не операция с реактивными снарядами.
![intercom](https://cloud.pllsll.ru/1366x/pollskill/storage/16/35/db/17f7ef14ebf.png)
16. Кнопки пагинации
Предполагаю, что вы не выбрали бесконечную прокрутку, значит вашим пользователям нужен способ добраться до страницы 27.
![Borunda](https://m.pllsll.com/pollskill/storage/3f/f8/bc/28005d965b5.gif)
17. Курсоры
Кнопки должны иметь указатель. Не интерактивные материалы должны иметь курсор по умолчанию. Текст должен иметь текстовый курсор. Разработчики не всегда это знают.
![Jeff Broderick](https://cloud.pllsll.ru/1366x/pollskill/storage/a0/92/cd/2443b3a71df.png)
18. Механизмы сортировки, фильтрации и поиска по таблицам
![Eugen Esanu](https://cloud.pllsll.ru/1366x/pollskill/storage/8a/2b/76/dfa1dbb7f32.png)
19. Пустые статусы "нет результатов"
Иногда вы ищете что-то или добавляете слишком много фильтров, и нет никаких результатов. Как грустно. Подбодри своих пользователей иллюстрацией.
![Reiner Wendland](https://m.pllsll.com/pollskill/storage/34/4e/b1/41bb00aac8f.gif)
20. Состояния ошибки
Неверный ввод, неправильный пароль, несуществующий счет. Есть много вещей, которые могут пойти не так, особенно если ты моя бабушка, и я тебе подарил iPad на Рождество. Это была ошибка.
![Mike Stezycki](https://m.pllsll.com/pollskill/storage/cc/a8/76/a47248d70d2.gif)
21. Сообщения системы
Система всегда делает что-то за занавесом, и иногда приятно знать, когда дела заканчиваются успешно (или нет). Вы должны позволить пользователю знать это.
![Это из папки "Входящие" Google. "Отмена" действительно удобна, когда вы случайно удалили сообщение](https://m.pllsll.com/pollskill/storage/bd/52/dd/fe98958df49.gif)
22. Пустой список автозаполнения
Автозаполнение является отличным решением для того, чтобы помочь найти объекты в системе, но иногда нет результатов. В этом случае, не оставляйте пустое поле. Нужно показать небольшое сообщение или позволить предпринять какие-то действия.
![Jurriaan van Drunen](https://m.pllsll.com/pollskill/storage/47/9e/e4/05a6e0e58ad.gif)
23. Состояние загрузки страницы
Хорошо если этот процесс, как-то будет обозначен на странице
![XPLAI](https://m.pllsll.com/pollskill/storage/30/20/7a/2c889d59229.gif)
Материалы запуска
24. Иконка приложения
Да, наверное, лучше не забывать о ней.
![Eddie Lobanovskiy](https://cloud.pllsll.ru/1366x/pollskill/storage/14/8d/95/75a105ed83e.png)
25. Изображения для App Store
![Daniel Beere](https://cloud.pllsll.ru/1366x/pollskill/storage/af/3c/36/10e5da4855a.png)
26. Изображения открывающиеся в социальных сетях
Это те изображения, которые появляются, когда вы публикуете ссылку в Twitter, делаете пост в Facebook и другие социальные сети.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/52/12/7e/6dbf0b93340.png)
27. Страница торговой площадки
Хорошо, если вы справились со всем, что перечислено выше. Но в этом случае вам, необходимо так подготовить страницу, чтобы она соответствовала бренду с которым совершаются сделки на шестизначные суммы, над которыми работает ваша блестящая команда продаж.
![Страница, на которой компания отправляет, отслеживает, оплачивает счета и расходы.](https://cloud.pllsll.ru/1366x/pollskill/storage/45/05/5c/c589a911ef3.png)
28. Страницы Рitch Deck (презентации)
Это раздел сайта, важен и как страницы торговой площадки, и он немного более дальновидный. Когда вы соберитесь найти инвестора и собрать деньги, вам пригодится эта презентация бизнеса.
![Вот коммерческая тайна — всегда использовать графики в своей презентации. Это не шутка.](https://cloud.pllsll.ru/1366x/pollskill/storage/aa/27/45/be531c46120.png)
29. Рекламные банеры для Facebook / Вконтакте
«Но у нас нет рекламы в Facebook и в Вконтакте!» — скажете вы. Пока нет. Но никто вас не заставляет. Просто сделайте их, и они вам пригодятся.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/77/e5/c0/f41449e35ff.png)
![Summer Camp](https://cloud.pllsll.ru/1366x/pollskill/storage/5b/98/52/b3804328d64.jpg)
Профиль
31. Настройки уведомлений
Это потрясающе, когда приложение или сайт сообщают вам, когда что-то происходит. Но после 19-го раза они действительно могут устать от писем. Вы должны позволить пользователю решить, когда они хотят получать уведомления с сайта.
![Настройки уведомлений сайта Slack](https://cloud.pllsll.ru/1366x/pollskill/storage/b7/de/67/75404a687c9.png)
32. Страница платежных данных
Не забывайте, что люди должны получать копии своих счетов, оплачивая продукт, за который они платят вам большие деньги.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/fa/0b/6f/a3d84f39089.png)
33. Опция «Удалить мою учетную запись»
Хорошо, я знаю. Вы не хотите этого делать. Но, может, пользователь создаст новую учетную запись? Есть уважительные причины для этого, например кто-то удалил старую учетную запись, которая уже покрылась пылью, и захотел заново начать работу. В любом случае, это хорошее обслуживание клиентов.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/fa/6d/c3/30841197d3f.png)
34. Инструмент для обрезки фотографии профиля
Создайте инструмент для обрезки фотографии профиля
![](https://cloud.pllsll.ru/1366x/pollskill/storage/d7/99/ce/1859911d704.png)
35. Опция Отредактировать профиль
На сайте должно быть легко обновить профиль, изменить тарифный план.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/1a/ed/e7/7475d699eb0.png)
Различные изменения
36. Дать возможность изменить адрес пользователя
![](https://cloud.pllsll.ru/1366x/pollskill/storage/b3/5f/7f/c1d7fc80b9d.png)
37. Функция «Пользовательский фильтр»
Если вы делаете сложную фильтрацию, было бы неплохо добавить возможность сохранить этот сложный фильтр.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/69/d4/72/c23c53777aa.png)
38. Функция «Добавить в корзину»
Смешно думать, что разработчики забывают об этой возможности, но теперь вы знаете.
![](https://m.pllsll.com/pollskill/storage/99/fc/4a/31b63a4103a.gif)
39. Функция «Удалить и восстановить»
Когда удаляется что-то важное, нужно дать возможность немедленно это вернуть.
![](https://m.pllsll.com/pollskill/storage/48/b6/c0/0ad2d85050a.gif)
40. Функция «Пригласить кого-то»
Нет лучшего способа добавить некоторую «виральность» вашему продукту, чем создать приглашения и совместное использование. Учимся у тебя, Dribbble. Убедитесь, как это легко, быстро и весело!
![](https://cloud.pllsll.ru/1366x/pollskill/storage/d8/ed/f3/c4cb9bb16ef.png)
Это далеко не исчерпывающий список всего. Дизайнеру нужно помнить о миллионе вещей, при разработке продуктов. Надеюсь, эти подсказки помогут вам при разработке ваших проектов.
На основе статьи Jon Moore