ux

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

Потом добавьте другие отступы, подвигайте текст пробелами, сделайте иконки текстом (←→×).

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

Простой текст
↓
Текст с отступами
↓
Красивые разные шрифты и иконки

Зачем это всё?

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

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

Получается, сперва собираем ёлку, а потом вешаем украшения.

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

@st8rmi: The new Office App

Через два месяца выходит приложение, но выглядит как-то обыденно. Аутлук и Офис используют стандартные элементы iOS UI Kit и не отличаются от стандартной почты на айфоне.

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

• Windows Terminal
• Мобильный Офис
• Темная тема Офиса

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

Ненастоящее окружение дополняет нереалистичные эффекты, у нас не белые пустые комнаты и рабочие столы: комнаты всегда чем-то заставлены, а на рабочих столах куча файлов, беспорядок и фотография гор вместо нежно-голубого фона. У нас всегда забит календарь (Джейсон Фрид исключение), открыто много программ, вокруг много влияющих на восприятие вещей, в голове много мыслей. Все не так, как в воображаемом вакууме.

Тут важное от Эппл про использование слов в интерфейсе, еще одно напоминание, что в разговорной речи не так, как в интерфейсных и компьютерных задачах:

“Use choose, not select, for menu items. In general, the user selects something (such as a file or disk icon, an email message, or a section of text) and then chooses a command to act on the selection.”

…

“Use choose, not select, for menu items. In general, the user selects something (such as a file or disk icon, an email message, or a section of text) and then chooses a command to act on the selection.”

Коротко: сперва «select» несколько фотографий, а потом «choose» поделиться.

Отсюда: Reminder: Select and Choose Are not Synonyms

Недавно Твиттер изменили в веб версии иконку поиска на хэштег. Это было не лучшее решение.

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

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

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

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

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