Олег Чулаков
558
Блоги

Chulakov Design #3: поговорим о дизайне

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

Поделиться

В избранное

В избранном

А здесь вы найдете другие заметки дизайнеров Студии.

Право на ошибку

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

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

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

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

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

Отзывчивый интерфейс

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

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

Если вы видите неотзывчивый интерфейс, знайте — дизайнер повернулся спиной к своему пользователю.

Привычная механика

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

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

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

Контраст

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

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

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

{ "author_name": "Олег Чулаков", "author_type": "self", "tags": [], "comments": 3, "likes": -1, "favorites": 7, "is_advertisement": false, "section_name": "blog", "id": "37025", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "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": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "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" } } } ]