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

Интерфейсы без шелухи

Выпуск 25  •  1 декабря 2016

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

Например: есть сеть супермаркетов с доставкой на дом. Интерфейс — интернет-витрина, через которую люди заказывают продукты. Очевидное уже упростили: идти в магазин не надо, натыкал мышкой, картой оплатил, назавтра получил. Что дальше?

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

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

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

2. Показать внутреннее состояние
У нашего супермаркета «окно» приезда курьера — два часа. Меньше ну никак не получается.

Было: Насте приходится эти два часа сидеть дома, как приклеенной, и гадать, когда явится курьер.

Стало: на сайте супермаркета Настя видит маршрут «своего» курьера на карте. Метки на маршруте — заказы и расположение курьера. По карте примерно понятно, когда курьер доберется до Насти, поэтому она спокойно планирует дела.

3. Взять часть задачи на себя
Было: каждую пятницу Валера садится за компьютер, морщит мозг и заказывает продукты на неделю вперед. Ну, это в теории так. На практике Валера то вовсе забудет, то половину не закажет. Приходится потом бегать в магазин по соседству или баловать себя бутербродами с хлебом.

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

4. Трансформировать суть задачи
Понятно, что покупка продуктов для Насти — не самоцель. Цель у нее другая: вкусно и разнообразно питаться без вреда для фигуры и цвета лица, и не посвящать жизнь готовке. Поэтому теперь Настя выбирает готовое меню на неделю и получает расфасованный по блюдам заказ. Каждого продукта ровно столько, сколько необходимо. Для завтрака, обеда и ужина прилагается рецепт на 20–30 минут готовки. Удобно!

§ § §

Первый шаг — снизить умственную нагрузку — так или иначе осиливают все проектировщики.

Вторым — показать внутреннее состояние — в основном злоупотребляют: показывают «внутреннюю кухню» там, где она клиенту вообще не интересна.

Третий шаг — взять часть задачи на себя — это то, в чем хороший продукт опережает конкурентов.

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

— Антон


◇ ◇ ◇
 

Будущее как детская площадка

Михаил Калашников

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

 

Эти поля обязательны для заполнения

Ольга Романова

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

 

Теория графического напряжения

Игорь Штанг

Видеолекция Игоря о взаимном притяжении, балансе элементов и композиции в верстке. Если читали Лебедева или Горбунова о теории близости — это примерно оно, только более подробно и с примерами на книгах, журналах и плакатах.

Кстати, посмотрите: Андрей Шапиро и Игорь Штанг сделали симулятор графического напряжения. Шарики на холсте стремятся перейти в равновесное состояние, но вы как арт-директор можете им помешать :–)

 

Что посмотреть, если вы интересуетесь визуализацией данных

Майя Стравинская

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

 

Я полюбил верстку после этого: Zeplin в бою

Сергей Березняк

Сергей рассказывает, как Зеплин помогает установить мир между дизайнерами и программистами (верстальщиками). Нет больше версионной войны макетов. Верстальщик видит всю информацию по любому векторному объекту на холсте, просто ткнув в него мышью. Работает на любой операционной системе. Главное, чтобы дизайнеры использовали Скетч вместо Фотошопа. Как пишет Сергей: «вот уже второй год, как я снова полюбил верстку».


◇ ◇ ◇
 

Дизайнерский дайджест

Кирилл Олейниченко

Кирилл ведет еженедельную рассылку для дизайнеров: всё самое полезное, вдохновляющее и интересное из русского и английского интернета, отфильтрованное из более чем 300 источников. Мне кажется, его рассылка отлично дополняет «интерфейсы без шелухи»: у Кирилла переводы, новости, картинки для вдохновения, ссылки из ВК. Я сам подписан, выпуски реально огромные :–)

Рассылка платная, сто рублей в месяц. Есть бесплатный выпуск — посмотрите, как вам.

Дизайнерский дайджест Кирилла Олейниченко


◇ ◇ ◇
 
 ПЕРСОНА

Ольга Романова

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

Ольга Романова

На днях взял у Ольги интервью. Вот о чем говорили:

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

Подарок: гайдлайны для интерфейсов и стикеры с котами для телеграма ツ

Свинг — это танец!

Большое интервью с Ольгой Романовой


◇ ◇ ◇
 
Понравился выпуск? Подписывайтесь на рассылку
твитнуть
поделиться
Антон Жиянов

Я не в восторге от нового интерфейса Ситимобила, но почитайте процесс и оцените подход дизайнера Сергея Николаева к проектированию.



Email Marketing Powered by Mailchimp