Комментарии
В номере: что дизайнерам взять на заметку от iOS 14 и macOS Big Sur и как правильно писать сообщения об ошибках
Ланч-тайм 283: краткий перевод свежих статей о digital
Сибирикс

Ланч-тайм 283: краткий
перевод свежих статей о digital

В номере: что дизайнерам взять на заметку от iOS 14 и macOS Big Sur и как правильно писать сообщения об ошибках
885

Что дизайнерам взять на заметку от iOS 14 и macOS Big Sur?

дизайн ios 14
С выпуском iOS 14 и macOS Big Sur мы стали свидетелями новых трендов в дизайне — и это не неоморфизмом :)

Плоский дизайн больше не в тренде

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

Как сказал Алан Дай, вице-президент департамента по интерфейсу для пользователей в Apple: «Глубина, затенение и полупрозрачность используются для создания иерархии. Новые объекты — богатые и яркие… «

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

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

Новые интуитивно понятные возможности

Человеческому мозгу нужна подсказка, чтобы распознать объект. Мы склонны воспринимать трехмерные объекты как интерактивные. Вот почему у многих кнопок все еще есть тень.

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

Последнее очевидное преимущество — это цвет. Apple хочет, чтобы дизайнеры использовали цвет Tint (или Accent), чтобы сделать активные элементы более заметными. Этот тон должен отражать цвет бренда или продукта. Благодаря этому пользователь сразу выстраивает мысленную связь между компанией и приложением.

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

Искусные диджитал-объекты

Все началось с Material Design от Google, который показал нам видение цифровой бумаги, затем Microsoft представила Fluent Design с концепцией множественных цифровых текстур. Похоже, Apple последовала этому примеру, более того, они подняли это на новый уровень!

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

Совет для дизайнеров: поиграйте с концепцией цифровых объектов. Используйте глубину, тени и полупрозрачность для создания визуальной иерархии. Если вы еще не знакомы с Material Design или Fluent Design System, прочтите их рекомендации, чтобы понять концепцию.

Незаметные эффекты создают ощущение качества

Есть крошечные детали, которые имеют значение. Вы не можете увидеть их все из макетов или снимков экрана, потому что некоторые из них являются движущимися или звуковыми (да, Big Sure представляет десятки новых и улучшенных звуков пользовательского интерфейса).

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

Совет для дизайнеров: узнайте, где и как в новой ОС используется Progressive Blur. Подумайте, как это можно применить в ваших проектах. Какие инструменты дизайна могут достичь такого эффекта сейчас?

Новый скевоморфизм в иконках

В последние годы в стиле macOS значки приложений были сглажены и окружены символами в основном круглой формы. Теперь все иначе: большинство иконок приобрели «iOS-подобную» форму, но не плоскую. Это скевоморфизм!

Совет для дизайнеров: изучите галерею новых значков. Посмотрите, как дополнительные тени и градиенты меняют ощущение плоских значков iOS, которые идеально подходят к стилю значков Big Sur. Рассмотрите возможность использования трехмерных фигур для некоторых элементов.

Показывать информацию быстро с помощью виджетов

iOS 14 предлагает совершенно новый подход к виджетам. Они отображаются прямо на главном экране. Эти виджеты почти идентичны на iPad OS и очень похожи на новые на macOS Big Sur.

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

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

Целостный подход к экосистеме

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

Последовательность дает пользователю чувство знакомства и уверенности. Это создает больше доверия и лучшую связь с брендом.

Совет для дизайнеров: если вы создаете омниканальное решение, доступное для всех типов устройств, обратите внимание на то, как приложения Apple меняются на разных платформах. Где сохраняется согласованность? Где вносятся изменения? Какие функции добавлены на разные платформы? Вы также можете прочитать Task Driven Design, чтобы узнать больше.
Вывод: следите за трендами, которые задают компании-гиганты и в тренде будете вы :) Перевели, чтобы вы сэкономили 30 минут.
886

О написании сообщений об ошибках

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

За чем нужно следить при создании сообщения об ошибке, так это за тем, чтобы сообщение описывало проблему (нужно объяснять, что произошло и почему) и предлагало решение (нужно объяснить пользователю, что он может с этим сделать).

А ниже приведены 8 советов для написания сообщений об ошибках:

1. Не вините пользователей

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

2. Не показывайте неоформленные ошибки

Сообщения, которые содержат коды внутренних ошибок системы или невнятные аббревиатуры, например, «Error 12 315» понятны только разработчикам, но не конечным пользователям.

3. Не используйте жаргон

Говорите на том же языке, что и пользователь; используйте терминологию, понятную целевой аудитории. Если ваша аудитория состоит из нескольких видов персон (например, разработчики и обычные пользователи), лучше написать сообщения для каждой из них. Например, «Ошибка 404. Такой страницы не существует. Возможно, в адресе есть ошибка или эту страницу уже удалили».

4. Не пишите длинные предложения

Никто не любит читать длинные текста. Хорошее читаемое предложение состоит из 15−20 слов. В сообщении выкиньте все слова, без которых можно обойтись, но следите, чтобы смысл оставался понятным.

5. Не пишите общими словами

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

6. Не используйте капслок и восклицательные знаки

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

7. Не прячьте сообщение об ошибке

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

8. Добавьте в сообщение немного жизни

Сообщите об ошибке, как старому другу. Можно пошутить, можно добавить смешную картинку — любую другую дружелюбную вещь, чтобы ошибка не расстроила пользователя.
Вывод: страница с ошибкой — это еще один способ поболтать с пользователем. Не упускайте его! Перевели, чтобы вы сэкономили 15 минут.
Берегите себя!