Выступление на hackday, про удобство и дизайн-мышление.

1. Или почему так важно знать правило 7 плюс минус 2
Калимуллин К.Г. AdVantShop.NET

5. С чего начинается дизайн?

6. Удобный дизайн начинается с
прототипа

7. Инструменты
прототипирования/дизайна.
http://axure.com/
Microsoft EXPRESSION
BLEND 3 + SKETCHFLOW
https://www.mybalsamiq.com/
Пробуйте, ищите….

8. О чем говорим?.

10. Вечный спор!
Простота = легкость для
восприятия
Это обязательно должно
быть на главной.
Одна простая идея
эффективнее
Выжать по максимуму.

12. Тезис - аксиома
Чем удобнее сервис/приложение/сайт, тем выше его
ценность

13. Что обычно не так?
Композиция (расположение блоков и
Композиция (расположение блоков и
элементов)
элементов)
Цветовая гамма (выбранные цвета для
Цветовая гамма (выбранные цвета для
элементов)
элементов)

16. А мозги у нас разные? Или нет?

19. 1.

20. 2.

21. 3.

22. 4.

24. Пример главной(разбор)

25. Shopify.com

26. Пример главной

27. Пример главной

28. Советы по основную интерфейсу
Используйте правило 7+-2
Ограничивайте палитру,
используйте работающие палитры
сочетания
Простота лучше!(вспомните про
логотип Microsoft и Adobe). Всё
идёт к простоте.
Всё гениальное – просто, но не всё
простое – гениально. (с) Энштейн.
Что самое
Что самое
главное?
главное?
Как сделать еще
Как сделать еще
проще?
проще?
Ищем гормонию
Ищем гормонию

30. 1. Какую их двух страниц Вам
комфортней читать?
37%
63%

31. 2. Какой их этих двух текстов
легче читать?
46%
54%

32. 3. Какой из вариантов меню
Вы предпочитаете?
78%
22%

33. 4. Какое вид навигации
Вы предпочитаете?
71%
29%

34. 5. На каком экране проще найти
строку поиска?
23%
77%

35. 6. Где Вы ожидаете увидеть
кнопку «Submit»?
50%
50%

36. 7. Какой дизайн вызывает
больше доверия к компании?
73%
27%

37. 8. Какое выделение обязательных
полей предпочтительнее?
50%
50%

38. 9. Какой из вариантов удобнее
закрыть?
5%
95%

39. 10. Какой вариант кнопки «Печать»
Вы предпочитаете?
22%
78%

41. Методологии
1. Эвристика Нильсена
2. Оценка по чек-листам
3. Сценарная оценка
4. Обратная карточная
сортировка
5. Тесты ожиданий
6. Оценка восприятия
Выбирайте своё
Выбирайте своё
Дизайн-мышление
Дизайн-мышление

42. Быстрые оценки
ДАЮТ
Проверку гипотез
Получение обратной связи
Видение основных проблем
Возможность проверки до
создания продукта
 Выявление приоритетов
для исправлений
 Выявление расхождений
 Понимание направлений
движения




Не дают
 Однозначного способа
исправления ошибки
 Статистически корректного
результата
 Понимания поведения
пользователя, его
контекста и ограничений

43. 1. Эвристика Нильсена
1.
Наглядность текущего состояния
системы
2.
Связь с реальным миром
3.
Управляемость и свобода действий
4.
Согласованность и стандарты
5.
Предотвращение ошибок
6.
Узнавание против запоминания
7.
Гибкость и эффективность
использования
8.
Эстетика и лаконичность дизайна
9.
Предвидение ошибок и
восстановление после них
10. Справочная система и документация

44. 2. Чек -лист
 На основании экспертного
мнения составляется
контрольный список
проверки
 Утверждения, которые
можно проверить на сайте
 В основе чеклиста





Стандарты платформы
Паттерны поведения
Сложившиеся привычки
Регламенты
...

45. Где брать?
 Стандарты платформы
 Брендбук
 Существующие привычки
 Best practices
 Существующие чеклисты

46. Пример чек-листа
 Размер страницы превышает размер окна?
 Схема планировка повторяется на всех
страницах?
 Существует ли отчетливый фокус на каждой
странице?
 Планировка визуально видна?
 Эффективно ли используется выравнивание?
 Эффективно ли используется группировка?
 Есть ли хороший контраст?
 Не громоздкая ли планировка?
 Нравится ли сайт эстетически?

47. 3. Сценарная оценка
 Сценарии
представляют собой
«истории»: что
пользователь хочет
делать, почему,
каковы его
ожидания.

48. Учитываем демографию и
контекст
Поместим задачу в контекст и
добавим демографии – получим
сценарии

49. Оценка «ключевого пути»
Выбирается «ключевой путь»
Транзакция
Наиболее частотная последовательность
перемещений
Наиболее частотный сценарий
Строится диаграмма переходов
На каждом переходе фиксируются
Барьеры (что препятствует выполнению
сценария)
Мотиваторы (что нейтрализует барьеры)
На основании соотношения барьеров и мотиваторов
можно сделать вывод о
Существующих проблемах
Приоритетах решения для этих проблем

50. 4. Обратная карточная
сортировка
 Проверка структура
навигации.
 Несколько видов:
 Тестирование дерева
 Списком (текстовый)
 Карточками
(графический)
 Тестирование
экранов

51. Процедура обратной карточной
сортировки
 Показать страницу/экран
 Для удаленной оценки нужно пронумеровать
интерактивные объекты, чтобы пользователь
выбирал «правильный» номер.
 Задать вопросы о том, где находится
информация:
 «Вам нужно узнать погоду на завтра. Где вы
будете её искать?»
 «В каком разделе находятся неподписанные
документы?»

52. Пример обратной карточной
сортировки

53. Задания пользователям

Где найти информацию о том, что
"Дмитрий Медведев приостановил
действие отдельных положений закона
«О страховании вкладов физических
лиц в банках Российской Федерации»"?

В сентябре Дмитрий Медведев посетил
казахстан. В каком разделе можно
найти информацию об этом событии?

Не так давно Дмитрий Медведев в
Питтсбурге сделал заявление
относительно ситуации вокруг Ирана. В
каком разделе сайта можно найти
информацию об этом заявлении?
3 -документы
5 - визиты
2 - выступления и стенограммы

54. 4. Тестирование ожиданий
Провести тест с
пользователями
Задавать им вопросы об
ожидаемом поведении того
или иного элемента
«Что вы ожидаете
увидеть, когда нажмете
на него?»
«Что произойдет после
нажатия на эту кнопку?»
Сравнить ожидания
пользователей с тем, что
планировалось
реализовать, или уже
реализовано.

55. 5. Оценка восприятия дизайна
 Используется для
оценки нескольких
вариантов дизайна;
 Нужно выбрать тот,
который лучше
других будет
вызывать у
пользователей
нужные, «целевые»
эмоций.

56. Процедура
 Задать список прилагательных, с которыми





должен ассоциироваться дизайн и их
антонимов
Нарисовать несколько макетов
Распечатать макеты в цвете
На основании прилагательных и их
антонимов сформировать шкалы
Провести тест с пользователями (~10),
которые по шкалам оценивает дизайн
Обработать результат

57. Обработка
 Посчитать средние (или суммы) по каждой
паре прилагательный.
 Построить диаграмму-профиль для
каждого варианта дизайна.
 Выбрать вариант дизайна, лучше
соответствующий целевым эмоциям.

58. Как выглядят результаты

59. 6. Соответствие стандартам
платформ
 Описания
 Взаимодействия
 Геометрических характеристик
элементов
 Стилистики
 Графического дизайна
 Подхода к компоновке
 Платформа
 Настольная
 Мобильная
 Touch-киоски
 Производитель




Microsoft
Apple
Nokia
Сообщества (Gnome, KDE)

60. Порядок оценки
 Эксперт по
интерфейсам данной
платформы :
 Изучает экраны
 Отмечает несоответствие
компоновки, размеров и
использования
элементов интерфейса
стандартам
 По окончании оценки в
экраны вносятся
изменения.
 Может быть встроено в
software testing.

61. WEB-стандарты
 Разработаны
департаментом Health and
Human (USA)
 Содержат полный спектр
гайдлайнов
Процессных
Accessibility
Компоновки
Использования тех или
иных элементов
 Взаимодействия




 Ограничение:
 В части использования RIA

62. Создавайте ценность!
Удобство – это ценность.
Спасибо!
Камиль Калимуллин
@buxler
kamil@itmcompany.ru