42
Выращиваем интерфейс своими руками Без дизайнеров и usability-специалистов twitter @op

Выращиваем интерфейс своими руками

  • Upload
    -

  • View
    2.093

  • Download
    4

Embed Size (px)

DESCRIPTION

26 апреля 2011 года, конференция "РИТ" (http://ritconf.ru/). Расшифровка: http://ux-news.ru/lecture/detail_olga_pavlova_quot_cu/

Citation preview

Page 1: Выращиваем интерфейс своими руками

Выращиваем интерфейс своими руками

Без дизайнеров иusability-специалистов

twitter @op

Page 2: Выращиваем интерфейс своими руками

Что такое интерфейс?Философия: точки взаимодействия Пользователя с Системой.Практика: картинки с пояснениями.

twitter @op

Page 3: Выращиваем интерфейс своими руками

Интерфейс—инструмент для диалога Пользователя с Системой

twitter @op

Page 4: Выращиваем интерфейс своими руками

Какие ещё бывают инструменты для диалога?Устная речь, текст, жесты, мимика, интонация, обмен рисунками, правила игры…

twitter @op

Page 5: Выращиваем интерфейс своими руками

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

twitter @op

Page 6: Выращиваем интерфейс своими руками

Интонации интерфейсаЭто можно и нужно обсуждать.To whom how—хорошо должно быть пользователям, а не вам.

twitter @op

Page 7: Выращиваем интерфейс своими руками

Текст? Текст!Россия—страна текста. Много букв? Но мы умеем и любим читать.

twitter @op

Page 8: Выращиваем интерфейс своими руками

Расскажите, что происходит между Пользователем и Системой

twitter @op

Page 9: Выращиваем интерфейс своими руками

Картинки—дело привычки.Буквы—дело принципа.

twitter @op

Page 10: Выращиваем интерфейс своими руками

Запишите диалоги

twitter @op

Page 11: Выращиваем интерфейс своими руками

Пользовательские сценарииДавайте уже считать их написание базовым навыком.Для менеджеров как минимум.

twitter @op

Page 12: Выращиваем интерфейс своими руками

Монолог—это вырожденный диалог

twitter @op

Page 13: Выращиваем интерфейс своими руками

«Мама мыла раму»—пишем просто и быстро

twitter @op

Page 14: Выращиваем интерфейс своими руками

Как писать? Как будто вы не видите экранНельзя: «нажал кнопку», «открыл окно», «заполнил форму».Можно: «сообщил Системе».

twitter @op

Page 15: Выращиваем интерфейс своими руками

Принцип мячикаВзял-отдал, Пользователь-Система, по очереди.

twitter @op

Page 16: Выращиваем интерфейс своими руками

Ожидание (молчание)—тоже часть диалога

twitter @op

Page 17: Выращиваем интерфейс своими руками

Бывают ошибкиИ это—самое интересное.

twitter @op

Page 18: Выращиваем интерфейс своими руками

Где же «страницы» («экраны»)?А вот же, за каждым глаголом.

twitter @op

Page 19: Выращиваем интерфейс своими руками

Человек сказал Днепру:—Я стеной тебя запру.[...]—Нет,—ответила вода,—Ни за что и никогда!

twitter @op

Page 20: Выращиваем интерфейс своими руками

Нашли «страницы»? Опишите!Объектно-навигационная модель—картотека «страниц» интерфейса.

twitter @op

Page 21: Выращиваем интерфейс своими руками

По каждой «странице»:

• ссылки на сценарии, в которых используется;

• информационные ожидания пользователей;

• востребованные одношаговые действия.

И всё!

twitter @op

Page 22: Выращиваем интерфейс своими руками

Пока всё хорошо.

Но что же конкретно делать?

twitter @op

Page 23: Выращиваем интерфейс своими руками

Нужны приоритеты.

Самое время для персонажей.

twitter @op

Page 24: Выращиваем интерфейс своими руками

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

twitter @op

Page 25: Выращиваем интерфейс своими руками

Поверьте в персонажейУбедительное, живое и смешное описание. Фотография. Реальный прототип. Поиск следов в статистических данных. Примерка решений конкурентов.

twitter @op

Page 26: Выращиваем интерфейс своими руками

Для экстремалов—персонажи живьём

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

twitter @op

Page 27: Выращиваем интерфейс своими руками

Персонажи, а не вы, выставят приоритеты

Таблица «функционал—востребованность».

Оцениваем сценарии или ожидания к «странице».Оценивают персонажи (или лица, принимающие решения).

Договоритесь на берегу.

twitter @op

Page 28: Выращиваем интерфейс своими руками

Вы и ваши коллеги можете быть персонажами

twitter @op

Page 29: Выращиваем интерфейс своими руками

Можно собирать интерфейсПрограммист, менеджер, да кто угодно.

twitter @op

Page 30: Выращиваем интерфейс своими руками

Авторитет важней уменияПрикройте свои руки чужим авторитетом.

twitter @op

Page 31: Выращиваем интерфейс своими руками

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

twitter @op

Page 32: Выращиваем интерфейс своими руками

Сценарии и модель—посредники при доведении до ума

twitter @op

Page 33: Выращиваем интерфейс своими руками

Поговорим?

twitter @op

Page 34: Выращиваем интерфейс своими руками

«Тут не предусмотрен случай такой-то»Исправляйте буквы. Сразу картинки—как код без тестирования.

twitter @op

Page 35: Выращиваем интерфейс своими руками

«Нужно цельное решение, предложите готовые варианты»Варианты чего? Обсуждайте пользовательские сценарии!

twitter @op

Page 36: Выращиваем интерфейс своими руками

«Нет никаких сценариев, сделайте мне одну простую страничку»Обсуждайте объектно-навигационную модель «странички».

twitter @op

Page 37: Выращиваем интерфейс своими руками

«А где техническое задание?»Написать и защитить ТЗ—личное дело разработчика.

twitter @op

Page 38: Выращиваем интерфейс своими руками

«Не вижу картину в целом, покажите список страниц»У вас же уже есть объектно-навигационная модель?

twitter @op

Page 39: Выращиваем интерфейс своими руками

«Должно быть по guidelines»От вас хотят отсылок на внешние авторитеты и логику.

twitter @op

Page 40: Выращиваем интерфейс своими руками

Первая версия—в помойку.Вторая—в топку.

А третья—в разработку.

twitter @op

Page 41: Выращиваем интерфейс своими руками

Долго? Дорого? Правда, что ли?Сценарий, 1 штука—10 минут на старте + 30 минут допилок.

Объектная модель, 1 страница—2 минуты на старте + 5 минут допилок.

Прототип интерфейса, 1 страница—2 часа на итерацию (!).

Объём среднестатистического «проекта без проектировщика»—7-10 сценариев, 10-30 страниц.

Всё ещё хотите сразу собирать интерфейс?

twitter @op

Page 42: Выращиваем интерфейс своими руками

Спасибо :)

Ольга Павлова, UsabilityLabolga-pavlova.rutwitter @op

twitter @op