x
 
Марат Бектемиров
22 декабря 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как показать на смартфоне, планшете что можно кликнуть по области? Ховера нет на сенсорных устройствах


Даже на деск­топе пола­гаться на один только ховер — дур­ной тон. Интер­фейс дол­жен быть поня­тен на вид, а не «наощупь».

Если три спо­соба пока­зать кли­ка­бель­ность: поло­житься на интер­фейс­ную при­вычку, исполь­зо­вать опыт из физи­че­ского мира или ска­зать словами.

Положиться на интерфейсную привычку

Люди знают, что неко­то­рые эле­менты нажи­ма­ются. Если передо мной кнопка, ссылка или иконка при­ло­же­ния, то ясно, что можно нажать.

Выпук­лость, скруг­лён­ные края, цен­тровка подпи­си помо­гают узнать кнопку:

Чем меньше при­зна­ков, тем слож­нее. Но на узна­ва­е­мость вли­яет и кон­текст. Если в конце экрана крупно напи­сано слово «Начать», мы лишь по поло­же­нию и фор­му­ли­ровке дога­да­емся, что нажать можно:

Даже если бы не было цвета — ну а куда ещё жать?

Кнопка теряет нажи­ма­е­мость и кажется забло­ки­ро­ван­ной, когда кон­траст между её цве­том и цве­том подпи­си или иконки падает — можно даже цвет оставить:

Ну а уж если и цвет убрать, то такое точно нико­гда не нажмётся:

При­знаки ссылки — это синий цвет, под­чёр­ки­ва­ние, стре­лочка › вправо, ико­ночка. Но даже чёр­ная строчка из слов наверху веб‑стра­ницы вос­при­ни­ма­ется как нажи­ма­е­мое меню.

У дру­гих эле­мен­тов интер­фейса — свои признаки.

Неудач­ный при­мер — меню Инстаграма:

Я хочу сме­нить фото про­филя, жму «Сме­нить фото про­филя», но ничего не про­ис­хо­дит. Ока­зы­ва­ется, это заго­ло­вок меню, а нажать надо на что‑то дру­гое. Отли­чие между заго­лов­ком и пунк­тами меню сла­бое и неин­фор­ма­тив­ное. Нажи­ма­е­мость самих пунк­тов меню даже не при­хо­дится обо­зна­чать — это же меню!

Использовать опыт из физического мира

Когда в интер­фейсе появ­ля­ется пред­мет из физи­че­ского мира, с ним хочется повза­и­мо­дей­ство­вать так же, как в физи­че­ском мире. Рогатку хочется оттянуть:

Пла­сти­ночку повжикать:

Где‑то тут надо при­ме­нить слово «скео­мор­физм» хотя бы чтобы этот совет можно было найти поис­ком по нему.

Сказать словами

Когда у вас непри­выч­ный эле­мент, можно про­сто ска­зать сло­вами, что делать:

Идёт запись на курс 18 января — 12 февраля 2021 года

Смот­рите также такой 30‑секунд­ный фраг­мент с моего интер­фейс­ного курса:

Идёт запись на курс 18 января — 12 февраля 2021 года
Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Недавно всплыло

Есть ли шрифты, которые можно использовать в логотипе без лицензии? 2 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 26 8 Как начинающему автору отстаивать свою позицию? И нужно ли это делать? 2