выращиваем интерфейс своими руками. ольга павлова. зал...
-
Upload
rit2011 -
Category
Technology
-
view
461 -
download
2
Transcript of выращиваем интерфейс своими руками. ольга павлова. зал...
![Page 1: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/1.jpg)
Выращиваем интерфейс своими руками
Без дизайнеров иusability-специалистов
twitter @op
![Page 2: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/2.jpg)
Что такое интерфейс?Философия: точки взаимодействия Пользователя с Системой.Практика: картинки с пояснениями.
twitter @op
![Page 3: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/3.jpg)
Интерфейс—инструмент для диалога Пользователя с Системой
twitter @op
![Page 4: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/4.jpg)
Какие ещё бывают инструменты для диалога?Устная речь, текст, жесты, мимика, интонация, обмен рисунками, правила игры…
twitter @op
![Page 5: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/5.jpg)
Часть правил игры уже знакомаGuidelines, шаблонные решения интерфейса и предметной области, терминология и ожидаемые контекстные действия.
twitter @op
![Page 6: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/6.jpg)
Интонации интерфейсаЭто можно и нужно обсуждать.To whom how—хорошо должно быть пользователям, а не вам.
twitter @op
![Page 7: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/7.jpg)
Текст? Текст!Россия—страна текста. Много букв? Но мы умеем и любим читать.
twitter @op
![Page 8: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/8.jpg)
Расскажите, что происходит между Пользователем и Системой
twitter @op
![Page 9: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/9.jpg)
Картинки—дело привычки.Буквы—дело принципа.
twitter @op
![Page 10: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/10.jpg)
Запишите диалоги
twitter @op
![Page 11: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/11.jpg)
Пользовательские сценарииДавайте уже считать их написание базовым навыком.Для менеджеров как минимум.
twitter @op
![Page 12: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/12.jpg)
Монолог—это вырожденный диалог
twitter @op
![Page 13: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/13.jpg)
«Мама мыла раму»—пишем просто и быстро
twitter @op
![Page 14: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/14.jpg)
Как писать? Как будто вы не видите экранНельзя: «нажал кнопку», «открыл окно», «заполнил форму».Можно: «сообщил Системе».
twitter @op
![Page 15: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/15.jpg)
Принцип мячикаВзял-отдал, Пользователь-Система, по очереди.
twitter @op
![Page 16: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/16.jpg)
Ожидание (молчание)—тоже часть диалога
twitter @op
![Page 17: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/17.jpg)
Бывают ошибкиИ это—самое интересное.
twitter @op
![Page 18: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/18.jpg)
Где же «страницы» («экраны»)?А вот же, за каждым глаголом.
twitter @op
![Page 19: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/19.jpg)
Человек сказал Днепру:—Я стеной тебя запру.[...]—Нет,—ответила вода,—Ни за что и никогда!
twitter @op
![Page 20: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/20.jpg)
Нашли «страницы»? Опишите!Объектно-навигационная модель—картотека «страниц» интерфейса.
twitter @op
![Page 21: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/21.jpg)
По каждой «странице»:
• ссылки на сценарии, в которых используется;
• информационные ожидания пользователей;
• востребованные одношаговые действия.
И всё!
twitter @op
![Page 22: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/22.jpg)
Пока всё хорошо.
Но что же конкретно делать?
twitter @op
![Page 23: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/23.jpg)
Нужны приоритеты.
Самое время для персонажей.
twitter @op
![Page 24: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/24.jpg)
Обычно с них начинают. Но это скучно и грустно. Зачем начинать с описания каких-то там людей, которых и на свете-то нету? Всем же понятно, для кого мы делаем систему, да, да? Вот и техдир головой кивает, ему-то точно понятно. Жаль, что его понимание не совпадает с пониманием верстальщика, тестера, системного архитектора, дизайнера...
twitter @op
![Page 25: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/25.jpg)
Поверьте в персонажейУбедительное, живое и смешное описание. Фотография. Реальный прототип. Поиск следов в статистических данных. Примерка решений конкурентов.
twitter @op
![Page 26: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/26.jpg)
Для экстремалов—персонажи живьём
Usability-тестирование
twitter @op
![Page 27: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/27.jpg)
Персонажи, а не вы, выставят приоритеты
Таблица «функционал—востребованность».
Оцениваем сценарии или ожидания к «странице».Оценивают персонажи (или лица, принимающие решения).
Договоритесь на берегу.
twitter @op
![Page 28: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/28.jpg)
Вы и ваши коллеги можете быть персонажами
twitter @op
![Page 29: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/29.jpg)
Можно собирать интерфейсПрограммист, менеджер, да кто угодно.
twitter @op
![Page 30: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/30.jpg)
Авторитет важней уменияПрикройте свои руки чужим авторитетом.
twitter @op
![Page 31: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/31.jpg)
Запаситесь буквами перед обсуждением картинокНет задачи «отстоять», есть задача сверить часы.Каждый знает, хороши ли картинки.
twitter @op
![Page 32: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/32.jpg)
Сценарии и модель—посредники при доведении до ума
twitter @op
![Page 33: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/33.jpg)
Поговорим?
twitter @op
![Page 34: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/34.jpg)
«Тут не предусмотрен случай такой-то»Исправляйте буквы. Сразу картинки—как код без тестирования.
twitter @op
![Page 35: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/35.jpg)
«Нужно цельное решение, предложите готовые варианты»Варианты чего? Обсуждайте пользовательские сценарии!
twitter @op
![Page 36: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/36.jpg)
«Нет никаких сценариев, сделайте мне одну простую страничку»Обсуждайте объектно-навигационную модель «странички».
twitter @op
![Page 37: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/37.jpg)
«А где техническое задание?»Написать и защитить ТЗ—личное дело разработчика.
twitter @op
![Page 38: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/38.jpg)
«Не вижу картину в целом, покажите список страниц»У вас же уже есть объектно-навигационная модель?
twitter @op
![Page 39: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/39.jpg)
«Должно быть по guidelines»От вас хотят отсылок на внешние авторитеты и логику.
twitter @op
![Page 40: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/40.jpg)
Первая версия—в помойку.Вторая—в топку.
А третья—в разработку.
twitter @op
![Page 41: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/41.jpg)
Долго? Дорого? Правда, что ли?Сценарий, 1 штука—10 минут на старте + 30 минут допилок.
Объектная модель, 1 страница—2 минуты на старте + 5 минут допилок.
Прототип интерфейса, 1 страница—2 часа на итерацию (!).
Объём среднестатистического «проекта без проектировщика»—7-10 сценариев, 10-30 страниц.
Всё ещё хотите сразу собирать интерфейс?
twitter @op
![Page 42: выращиваем интерфейс своими руками. ольга павлова. зал 3](https://reader037.fdocuments.net/reader037/viewer/2022103001/557f4936d8b42ac3288b4fd7/html5/thumbnails/42.jpg)
Спасибо :)
Ольга Павлова, UsabilityLabolga-pavlova.rutwitter @op
twitter @op