Дизайн пользовательских

Интерфейсов для

Разработчиков

Докладчик: Малиновский Игорь

#3

ПЛАН

• Что это и зачем?

• Что такое хороший интерфейс

• Как создать awesome интерфейс

• Практические примеры

Что это и зачем?

Источник схемы: http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

Источник материала: Jon Innes «Integrating UX into the Product Backlog The User Experience Integration Matrix»

http://www.boxesandarrows.com/view/integrating-ux-into

USER

EXPERIENCE

Usability

Design

Accessibility

Marketing

System Performance

Ergonomics

Utility

Human Factors

HCI

ЗАЧЕМ ВСЕ ЭТО ?

BLACK

X CORE

BLUZ

HYPER

SUPER

ENGINE framework CMS library

1 Программирование

ЗАЧЕМ ВСЕ ЭТО ?

2 Дизайн интерфейсов

«Прикрутили» дизайн

MS Office 2003

MS Office 2007 (Ribbon bar)

ЗАЧЕМ ВСЕ ЭТО ? M

icroso

ft Office

an

d M

icroso

ft Wo

rd is re

giste

red

trad

em

ark

s of M

icroso

ft Co

rpo

ratio

n

0

50

100

150

200

250

MS Office 2003 MS Office 2007

+108%

Соотношение количества проданных копий

ЗАЧЕМ ВСЕ ЭТО ?

Источник: Исследование NPD Group 2007 опубликованное в www.informationweek.com

ЗАЧЕМ ВСЕ ЭТО ?

Материал по теме: Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя

1 Дизайн интерфейсов

ЗАЧЕМ ВСЕ ЭТО ?

2 Программирование

ЗАЧЕМ ВСЕ ЭТО ?

Agile Development

+

User E x p e r i e n c e

♡ =

Материалы по теме: Асхат Уразбаев - UX в Scrum — итерация ноль для проектирования продуктов (UXRussia - 2011);

Jeff Patton - http://agileproductdesign.com (blog, presentations, articles)

Что такое хороший интерфейс

Материалы по теме:

Dmitry Fadeev. User interface design in modern. Smashing book #1 2009;

Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

1 2 3 4 5 6 7 8

Как создать хороший интерфейс

1

2

Создавайте «быстрые» прототипы

Тестируйте полученные результаты

Материал по теме: Стив Круг. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать» (тестирование)

( not Хорошо )

КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС

тестирование

улучшение

do {

} while Проблемы устранены

Материал по теме: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС

Тестируем задавая себе следующие вопросы:

1. Можно ли ускорить взаимодействие пользователя с этим

интерфейсом?

2. Где в этом интерфейсе места, которые могут продуцировать

человеческие ошибки? Можно ли изменить эти фрагменты?

3. Что в этом интерфейсе не способствует обучению? Что

пользователю нужно знать, чтобы успешно

взаимодействовать с этим интерфейсом? Есть ли в этом

перечне что-то, чего сам интерфейс не сообщает

пользователю?

Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС

4. Известно ли мне о пользователях что-нибудь, что делает

этот интерфейс плохим?

5. Удовлетворяет ли этот интерфейс все известные мне

мотивы пользователей?

6. Совместим ли этот интерфейс со средой, в которой

работают пользователи?

7. Есть ли задачи, которые неэффективно отрабатываются

интерфейсом?

8. Сексуален ли этот интерфейс и можно ли его сделать ещѐ

сексуальнее?

Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

Анализ сайта thinkPHP thinkphp.com.ua

Оригинал

Подписи побуждающие к действию

Где я ? (1, 3)

- что это за сайт ?

- в каком разделе сайта я нахожусь ?

(отсутствует навигация по сайту)

Пользователи VK.com не могут авторизоваться (4)

Ребята признающие

исключительно JS (Ruby,

ect) могут сразу отказаться

от сайта, так и не узнав,

что их опыт нам тоже

интересен (4)

Можно улучшить качество лого (8)

АНАЛИЗ САЙТА

Дизайн не адаптирован под

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

Оригинал

АНАЛИЗ САЙТА

Пользователи должны действовать –

«Выбрать темы докладов на thinkPHP #4» (7)

Оригинал

АНАЛИЗ САЙТА

Каждая буква имеет значение

Материалы по теме:

Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя;

Разработка реалистичных пользовательских интерфейсов http://habrahabr.ru/post/103317/

АНАЛИЗ САЙТА

Вариант улучшения

АНАЛИЗ САЙТА

18 августа или 8 ? (2)

Оригинал

Люди НЕ читают текст*, главное должно быть выделено (1)

Нельзя быстро узнать: Что будет? Где будет? Сколько стоит? (7)

* - Материал по теме - Jakob Nielsen How Users Read on the Web http://www.useit.com/alertbox/9710a.html

АНАЛИЗ САЙТА

Вариант улучшения

АНАЛИЗ САЙТА

Вариант улучшения

Материал по теме - What Makes People Trust Online Gambling Sites? http://fegger.com/articles/chi2002.pdf

АНАЛИЗ САЙТА

Оригинал

Можно ускорить

интерфейс за счет

декомпозиции страницы

на две – «Программа» и

«Регистрация» (1)

Интерфейс не отвечает

на следующие

потенциально важные

вопросы:

- Когда начнется?

- Когда закончиться?

- Какая продолжитель-

ность доклада?

- Есть ли «кофе

брейки»?

(5)

Отсутствует

выравнивание

некоторых элементов

АНАЛИЗ САЙТА

Оригинал

Отсутствует возможность указать количество участников (7)

Вариант улучшения

АНАЛИЗ САЙТА

Вариант улучшения

АНАЛИЗ САЙТА

АНАЛИЗ САЙТА

Оригинал

Пользователь может только догадываться, что это

индикатор наличия докладчика (3)

Неправильное использование паттерна

Можем ускорить интерфейс за счет переноса кнопок

голосования вправо (1)

АНАЛИЗ САЙТА

Оригинал

Пользователь не может определить, голосовал ли он

за эту тему или нет (1, 2, 3)

До голосования После голосования

АНАЛИЗ САЙТА

Оригинал

Протестируйте этот интерфейс ;)

АНАЛИЗ САЙТА

Мой вариант улучшения :)

АНАЛИЗ САЙТА

Вариант улучшения

Спасибо за внимание