View
108
Download
0
Category
Preview:
Citation preview
Стажировка-2015
определения
HCI - Human Computer Interaction - человеко-компьютерное взаимо-действие. Область знаний, которая изучает, как человек взимодей-ствует с различными устройствами.
UX - user experience - опыт взаимодействия пользователя с програм-мой/интерфейсом.
UI - user interface
Стажировка-2015
принципы юзабилити
• Скорость работы пользователя
• Количество человеческих ошибок
• Субъективная удовлетворенность
• Скорость обучения
• Степень сохраняемости навыков при неиспользовании продуктa
• пользователи
• задачи пользователей
• их мотивация
На что ориентироваться?
Стажировка-2015
каким должен быть интерфейс?
• Чтобы его хотелось иметь
• Знакомый
• Простой vs понятный
Книга "Искусство мыть слона"
Стажировка-2015
Важные Вопросы
Откройте вашу программу/сайт на любом экране/странице, вы должны ответить на следующие вопросы:
• Где я? подсвечивать пункт в меню, хлебные крошки
• С чего начать? выделять важные элементы, не более 2-3
• Что можно улучшить?
Usability checklist: http://habrahabr.ru/post/178867/
Стажировка-2015
прототипироВание
прототип - это упрощенная модель, которая выполняет некоторые функции оригинала, предназначена для проверки гепотезы.
Чем раньше вы поймете, что ваш проект/устройство/стартапне работает - тем лучше.
Можно проверить:
• внешний вид
• функции
• принцип работы
Стажировка-2015
прототипироВание. стратегия
Цели пользователей и назначение сайта.
Как определить?
• задавать вопросы пользователям
• наблюдать за пользователями
• задавать вопросы заказчику
• стать пользователем
• метод персонажей
Важно определить целевую аудиторию.Не бывает “для всех”.
Стажировка-2015
прототипироВание. требоВания
Набор фич (функций) и требования к контенту.
• составить список фич
• расставить приоритеты
• Impact Mapping
http://effectcup.com/
Стажировка-2015
прототипироВание. структура
• Логическая структура (в виде дерева)
• Customr journey
Стажировка-2015
прототипироВание. компаноВка
• на бумаге
• Balsamiq, moqups (chrome), axure, ...
Стажировка-2015
psd по фен-шуюi-love-psd.ru
Не плоди лишних файлов
Исходники храни в папке /source/
Стажировка-2015
psd по фен-шую
Прикрепляй к проекту несистемные шрифты
Используй .zip вместо .rar
Называй файлы по-английски или транслитом
Называй файлы с учетом версии
Стажировка-2015
psd по фен-шую
Не склеивай слои без необходимости
Используй папки. Раскрашивай папки.
Выноси в папки глобальные элементы (хедер, футер, логотип, ...)
Стажировка-2015
psd по фен-шую
Давай слоям названия
Верстальщик сверстает все, что увидит. Удаляй лишние слои.
Recommended