Школа UX-проектировщика Digital Design 2013. Занятие 4.

1. Проектирование
интерфейса
Занятие 4
ШКОЛА UX-ПРОЕКТИРОВАНИЯ 2013

2. Этапы проектирования
Компоновка
То, что обычно имеют ввиду под удобством интерфейса
– расположение элементов и связи между ними

3. Еще раз о принципах

4. Работа пользователя с интерфейсом
• Когнитивная работа – понимание информации и поведения
интерфейса
• Мнемоническая работа – запоминание (расположение
элементов, связей между ними, паролей и пр.)
• Работа зрения – поиск нужной информации или объектов
интерфейса
• Физическая работа – клики, жесты

5. Как облегчить работу
пользователя

6. Чем меньше интерфейса, тем лучше
Михай Чиксентмихайи и его «состояние потока»

7. Следуйте ментальным моделям
• Лексика - даты не возрастают и не убывают, он бывают «давние»
и «недавние»
• Организация информации – иерархия или то что человек хочет
видеть

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

9. Элементы проектирования

10. Типовые схемы

11. Модульная сетка
960.gs

12. Адаптивный дизайн
Примеры адаптивного дизайна
на mediaqueri.es

13. Представление данных
Текстовое
Графическое

14. «Мариванна, мне листика не
хватило»
Или как разместить все самое нужное под рукой

19. Прототипирование

20. Может быстрее сразу делать чистовой
макет?
© Marius Ursache

21. Balsamiq Mockups
+ позволяет создавать
прототипы с высокой
интерактивностью
- громоздкий и
дорогой
axure.com
Мощный инструмент,
но лучше использовать
для чистовых макетов
adobe.com
+ бесплатный
- Работает в браузере и
довольно медленно
moqups.com
balsamiq.com

22. Домашнее задание
• Разработать интерактивный прототип в Balsamiq Mockups по
выбранному сценарию
• Необходимо представить 2 различных варианта интерфейсного
решения одной задачи (сценария)