Дизайн
Ilya Sidorenko
1256

Элементы интерфейса, сценарии, уведомления и персонализация

Лучшие идеи последних недель Telegram-канала The Design Times.

В закладки

Поле для ввода

Если вы не на Dribbble, то у полей должны быть четкие края, которые видны не только на Retina, но и на старых мониторах. (Советую проверять все оттенки серого).

Плейсхолдер в привычных полях не обязателен. Довольно глупо вставлять в поле с заголовком “Имя” плейсхолдер “Иван Иванов” или “Введите ваше имя” (пользователь не дурак).

Но в полях, где могут возникнуть вопросы, не помешает добавить пояснение. Например, если минимальная длина пароля 6 символов, неплохо бы об этом сообщить.

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

Сообщения об ошибках выдавайте красным цветом под полем или в отдельном попапе. Не помешает окрасить рамку в красный.

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

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

Если поле часто редактируется, добавьте справа крестик, который будет его очищать.

Создание инноваций

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

Например, первый электромобиль появился еще в 1841 году, но, объединив современные технологии и дизайн, Илону Маску удалось создать инновационную компанию, скомбинировав существующие до этого идеи.

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

Вот три автора, чьи книги помогли мне посмотреть на мир шире: Нассим Талеб, Юваль Ной Харари, Ричард Докинз.

Помимо этого, каждому дизайнеру полезно читать книги по бизнесу, так как наша работа напрямую с ним связана. Проще всего будет начать с биографий (например, Ричарда Брэнсона, Стива Джобса, Джеффа Безоса).

Сначала люди

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

Мы часто противопоставляем Apple с Microsoft и делаем это неспроста.

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

Microsoft же была основана двумя программистами: Биллом Гейтсом и Полом Алленом, поэтому в первую очередь компания ориентировалась на функциональность продукции.

Сейчас же почти все компании понимают значение дизайна и эмоциональной связи с брендом. Вспомните новогодние рекламные ролики Coca-Cola, поддержку экстремальных видов спорта Red Bull или презентации Apple. Благодаря подобным вещам, люди не просто используют какой-либо продукт, но и ассоциируют себя с определенной деятельностью.

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

Когда люди используют ваш продукт?Что они при этом испытывают?В чем нуждаются?

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

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

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

Негативный сценарий

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

Что произойдет, если пропадет соединение? Что вы предложите пользователю, если оплата не пройдет? Что, если пользователь введет некорректную информацию?

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

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

Персонализация

Суть персонализации — предоставить пользователю актуальную информацию или функционал.

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

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

Финансовые сервисы могут анализировать прошлые действия пользователя и предлагать их на главном экране. Например, если вы часто переводите деньги другу, то эту операцию можно упростить до нажатия одной кнопки “Перевести 1000 рублей Диме на карту”.

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

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

Уведомления

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

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

В описании уведомления сообщайте две вещи: что именно произошло и с каким объектом. Таким образом, пользователь сразу поймет в чем дело и ему не придется проваливаться внутрь, чтобы узнать подробности.

Самый простой пример:Объект: “Заказ 3048 (Книги на 1240₽)”Событие: “Собран и отправлен курьером”

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

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

Уведомления могут быть нескольких типов:

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

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

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

Заложник ТЗ

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

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

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

***

The Design Times: Telegram, Instagram.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ilya Sidorenko", "author_type": "self", "tags": [], "comments": 2, "likes": 15, "favorites": 59, "is_advertisement": false, "subsite_label": "design", "id": 55370, "is_wide": false, "is_ugc": true, "date": "Mon, 14 Jan 2019 09:28:10 +0300", "is_special": false }
0
{ "id": 55370, "author_id": 15705, "diff_limit": 1000, "urls": {"diff":"\/comments\/55370\/get","add":"\/comments\/55370\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/55370"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
2 комментария
Популярные
По порядку
2

Показалось, что статья какая-то капитанская.

Ответить
0

По-моему это просто реклама канала в телеге.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }