Красивый интерфейс – это лишь часть крутого UXНикита Ефимов

Никита Ефимовefimov.nikita@gmail.com

Обычный олдскул

Обычный олдскул

Обычный олдскул

WTF?

Конкуренты не дремлют

Конкуренты не дремлют

Рабочий инструмент

vs

Окружает много мифов

UX

Dribbbl’анутые

Вопросы к интерфейсу

Красиво, спору нет

Но реальность другая…

Тех. ограничения

Требования

Определенные пользователи

Вершина айсберга

Внешний вид

Архитектура интерфейса

ФункциональностьЦели пользователей и бизнеса

Далеко не всегда важна красота

Jesse James Garrett

Strategy

• потребности • контекст • задачи

Изучаем пользователей

Зачем изучать пользователей?

Дано

Поставщики

Оптовики

Розница

Автопитер

Потребности

Разные потребности

• Пополнить запасы на складе

• Заказать запчасти для ТО

• Заказать набор деталей для конкретного ремонта

• Заказать специфичную деталь “под клиента”

• Быть в курсе относительно стоимости и доступности

требуемой детали (консультирование)

Разные потребности на одном экране

Контекст

Картинки и мобильный интернет

Задачи и инструменты

FAIL!!!

FAIL!!!

Один номер на всех

123456

123456

123456

В итоге – борьба за ресурсы

? ? ?

В итоге – борьба за ресурсы

? ? ?

Адвокаты дьяв пользователей

https://www.youtube.com/watch?v=ZmivKyEY1Dk

“Нужность” для людей

Нужный = Чего хотят люди

Нужный – тот, который решает проблемы

Пользователи

• потребности • контекст • задачи

Бизнес Технологии

• ограничения • возможности • тек. реализация

• бизнес-цели • тек. ситуация • метрики

!!!

Strategy

Интерфейс Шрёдингера

Успешный Провальный

запасаюсь попкорном

Святая троица UX

Бизнес

Технологии Пользователи

• Какую пользовательскую проблему решаем?

Простой алгоритм действий

• Что это за люди?

• Зачем это нужно бизнесу?

• Какие есть ограничения/возможности?

Scope

• контекст использования • потребности пользователей и их поведение • стандарты, гайдлайны, эргономика • требования usability (относительно задач) • требования бизнеса (которые затрагивают пользователей) • требования безопасности и регуляторных документов • и т.д.

Функционал на базе требований

Убрать полезное

Убрать полезное

8 (383) 280-42-21

Написать обращение

Нужна помощь или есть вопросы?Обратитесь в службу заботы о клиентах

Оптовым клиентам: 5 раз в неделю

Самовывоз

Доставка по городу

Отправка по области

ул. 1-ая Ельцовка, дом 1 корпус "И"

Наличная и безналичная оплата

Водители

Воскобойников Александр

Тараканов Сергей

Чекушкин Алексей

Шагирданов Павел

Кононов Алексейдиректор филиала

Егоров Алексейменеджер по развитию

Москалюк Аннабухгалтер

ПН – ПТ: с 9:00 до 18:00

СБ, ВС: выходной

Автопитер – Новосибирск

Scope

• контекст использования • потребности пользователей и их поведение • стандарты, гайдлайны, эргономика • требования usability (относительно задач) • требования бизнеса (которые затрагивают пользователей) • требования безопасности и регуляторных документов • и т.д.

Функционал на базе требований

Feature creep

Structure

Информационная архитектура

• объектно-информационная модель • структура организации информации • системы поиска и навигации

WTF !?

It’s a kind of magic

??

??

?

Всё дело в информации

Информация

Информация

Информация

Информация

Ключевые проблемы

• Всегда есть больше одного способа организации информации. И не всегда ясно, какой из них лучше

• У людей разные цели и способы добраться до информации

• У людей обычно разное представление о том, где и какую информацию надо искать (и как её описать)

• Кто-то знает больше, а кто-то – меньше (на “входе” и о предметной области)

Доступ к нужной информации

Доступ к нужной информации

Надо задать 100500 вопросов

• Что человек ищет (какую информацию)? • Что он с ней собирается делать? • Какие использует термины для описания/поиска? • Как информационные объекты связаны друг с другом? • Как обеспечить быстрый доступ к наиболее важным

объектам? • Какая информация важна в первую очередь (на

конкретном экране)? • и многое другое…

Skeleton

Решение конкретных интерфейсных задач

• компоновка экранов и навигация между ними • учёт типовых паттернов • выбор типов элементов для взаимодействия • проработка микровзаимодействия • проработка реального контента • учёт особенностей восприятия информации и

поведенческих факторов

Проработка микровзаимодействия

Пустые состояния

Возможные проблемы

Особенности восприятия

Surface

Внешний вид приложения

• цвета • типографика • иконки • композиция

“Чтобы хотелось лизнуть”, ага.

Серонутые

Ограниченные возможности

• Нарушение цветовосприятия • Проблемные дисплеи/мониторы • Освещение • Физические возможности человека (зрение, моторика,

скорость обработки информации и др.) • Анимация • и многое другое

Ой, беда,беда…

Ой, беда,беда…

Серонутые

If we like just looking at a beautiful product, we’ll most likely end up thinking it is more usable than it actually is.

http://www.uxmatters.com/mt/archives/2016/08/designing-desirable-experiences.php

Jesse James Garrett

Эмоциональный дизайн

Люди забудут, что вы сказали. Люди забудут, что вы сделали. Но они никогда не забудут, что вы заставили их чувствовать.

Maya Angelou

Эмоции

Мы уже почти готовы отправить акт сверки

СПАСИБО, ЖДУ

Ваш запрос обрабатывается

16.03.2016 – 16.04.2016

alexander.voskoboynikov@gmail.com

Мы не нашли взаиморасчётов за указанный период

Попробуйте запросить акт сверки за другой период.

ЗАПРОСИТЬ

Ой, что-то пошло не так…

16.03.2016 – 16.04.2016

Эмоции

Эмоции

Гремучая смесь

цели пользователей и бизнеса

требования и ограничения

информационная модель

красота и эмоции

психология

паттерны взаимодействия

https://vk.com/devlife?w=wall-51033647_26237

“Крайне полезный” функционал

Ну вот и все…

slideshare.net/nefimov

efimov.nikita@gmail.com

fb.com/nikita.efimov

For graphics thanks to freepik.com