Стажировка-2015. Дизайнеры. Занятие 3

Проектирование интерфейсов.

Правильный psd.

Стажировка-2015

Что-то тут не так...

Стажировка-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

прототипироВание. стратегия

Цели пользователей и назначение сайта.

Как определить?

• задавать вопросы пользователям

• наблюдать за пользователями

• задавать вопросы заказчику

• стать пользователем

• метод персонажей

Важно определить целевую аудиторию.Не бывает “для всех”.

Стажировка-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 по фен-шую

Давай слоям названия

Верстальщик сверстает все, что увидит. Удаляй лишние слои.

Стажировка-2015

psd по фен-шую

Не забывай про экранные разрешения

Используй сетку

Стажировка-2015

psd по фен-шую

Кегль шрифта задавай целым числом

Комментируй то, что нарисовал

Стажировка-2015

psd по фен-шую

Поверь орфографию

Save for Web & Devices

Стажировка-2015

psd по фен-шую

Разумное JPEG-качество при экспорте

Save for Web & Devices

Выбирай правильныеформаты (JPEG vs PNG)