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

выращиваем интерфейс своими руками. ольга павлова. зал 3

  • Upload
    rit2011

  • View
    456

  • Download
    2

Embed Size (px)

Citation preview

Page 1: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

twitter @op

Page 2: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 3: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 4: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 5: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 6: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 7: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 8: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 9: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 10: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 11: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 12: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 13: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 14: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 15: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 16: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 17: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 18: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 19: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 20: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 21: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

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

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

И всё!

twitter @op

Page 22: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

twitter @op

Page 23: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

twitter @op

Page 24: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 25: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 26: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

twitter @op

Page 27: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

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

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

twitter @op

Page 28: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 29: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 30: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 31: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 32: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 33: выращиваем интерфейс своими руками. ольга павлова. зал 3

Поговорим?

twitter @op

Page 34: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 35: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 36: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 37: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 38: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 39: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

twitter @op

Page 40: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

twitter @op

Page 41: выращиваем интерфейс своими руками. ольга павлова. зал 3

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

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

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

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

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

twitter @op

Page 42: выращиваем интерфейс своими руками. ольга павлова. зал 3

Спасибо :)

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

twitter @op