004 Лекция о дизайне

Содержание:Содержание:

Вступление

Что такое дизайн, и почему вам нужно об этом знать

Основы теории юзабилити

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

Некоторые идеи интерактивного дизайна

Некоторые идеи графического дизайна

Основные контролы и правила их использования

Заключительная часть

Что такое дизайн,и почему вам нужно об этом знать

А как вы понимаете, что такое «дизайн»?

фот

о: A

dobe

Определения из словарей и энциклопедий

художественное конструирование предметного мира; разработка образцов рационального построения предметной среды

творческая деятельность, целью которой является определение формальных качеств промышленных изделий

англ. design — проектировать, чертить, задумать, а также проект, план, рисунок

вид деятельности по проектированию предметного мира

творческий метод, процесс и результат художественно-технического проектирования промышленных изделий, их комплексов и систем, ориентированного на достижение наиболее полного соответствия создаваемых объектов и среды в целом возможностям и потребности человека, как утилитарным, так и эстетическим

специфический ряд проектной деятельности, объединивший художественно-предметное творчество и научно обоснованную инженерную практику в сфере индустриального производства

Дизайн — это ...

Дизайн — это сознательные и интуитивные усилия по созданию значимого порядка.

Что такое «хороший дизайн»?

фот

о: A

pple

В речи большинства людей «дизайн» означает облицовку. Но это совершенно не так! Дизайн — это основа и душа любого человеческого творения.

Стив Джобс (глава Apple)ф

ото:

msn

bc.m

sn.c

om

—

Том Питерс (бизнес-гуру)

Дизайн — это страсть, эмоция и приверженность, и все это должно быть в сердце любого бизнеса.

фот

о: w

ww

.tom

pete

rs.c

om

—

Как дизайнеры видят окружающий мир

Нормальные люди«Продукт» или «услуга»

Это хороший товар

Он работает

«Я рад, что купил его»

Удовлетворенный клиент

Постоянный клиент

Вы получаете то, за что платите

Товар вам по карману

Удовлетворяет вашу потребность

Дизайнеры«Переживания»

Это кайф, писк

Он оставляет воспоминания

«Я хочу еще!»

Член клуба

Маркетинг из уст в уста

Вы удивлены и в восторге от каждого поворота

Товар вам по душе

Помогает вам самоопределиться

прим

ер и

з кн

иги

Том

а П

итер

са «

Осн

овы

. Диз

айн»

Дизайн конвертируется в деньгиф

ото

Smar

tMar

mot

с с

айта

flic

kr.c

om

Дизайн конвертируется в деньги

5 руб.

фот

о Sm

artM

arm

ot с

сай

та fl

ickr

.com

Дизайн конвертируется в деньги

180 руб.

фот

о JN

SL с

сай

та fl

ickr

.com

Компании, пекущиеся о дизайне




На этом слайде когда-нибудь будет

ваша компания


К чему же приводит такой подход?

Повышается лояльность постоянных клиентов, легче и быстрее происходят все согласования

Многократно увеличивается вероятность привлечения новых заказчиков

Сокращается число обращений в службу поддержки, претензий и замечаний, увеличивается число положительных и восторженных отзывов

1

2

3

Apple, Google, Nokia, Microsoft, ...

Основы теории юзабилити

Дизайн должен быть простым.

В основе юзабилити лежит здравый смысл.

Согласно ISO 9241-11

Юзабилити — это степень эффективности, трудоемкости и удовлетворенности, с которыми продукт может быть использован определенными пользователями при определенном контексте использования для достижения определенных целей.

Usability — the extent to which a product can be used by specified users to achieve specified goals with efficiency, effectiveness and satisfaction in a specified context of use.

Значимые факторы юзабилити

Фактическая скорость работы пользователя, субъективная скорость работы пользователя, скорость реакции системы, количество че-ловеческих ошибок, скорость обучения, успешность, мощность, стоимость разработ-ки, стандартность, совместимость, wow-фак-тор, настраиваемость, легкость исправления ошибок, воспринимаемая сложность, субъек-тивная удовлетворенность…

Характеристики Шнейдермана

Бен Шнейдерман — американский ученый, профессор, изучающий фундаментальные основы взаимодействия человека с компьютером.

фот

о: c

s.um

d.ed

u/~b

en/

Характеристики Шнейдермана

— Скорость работы— Количество человеческих ошибок— Скорость обучения— Удовлетворенность пользователей— Запоминаемость

Юзабилити-тестирование

— Насколько плох или хорош интерфейс?— Лучше ли он старого? — Быстро ли удается выполнить действия?— Ошибаются ли пользователи?— Есть ли проблемы?— Довольны ли пользователи?

Юзабилити-лабораторияф

ото:

ww

w.x

perie

ncec

onsu

lting

.com

Юзабилити-лабораторияф

ото:

ww

w.x

perie

ncec

onsu

lting

.com

Что нужно для тестирования

— Респонденты— Метод тестирования— Тестовые сценарии— Рабочее место для теста— Протестированный тест

Респондентыф

ото:

took

ie (fl

ickr

)

УРААА!!! Нас снова пригласили на юзабилити-тестирование!

Количество респондентов

70% проблем

85% проблем

Опыт работы с системой

есть

отсутствует

Уровень компьютерной грамотности

высокий

низкий

Возраст

целевой

старше

Пол

Пропорциональное количество женщин стоит чуть увеличить по сравнению с целевой аудиторией.

илл.

: Арт

емий

Леб

едев

Пассивное наблюдение

Поток сознания

Здесь, кажется, я должен поставить галочку...

Активное вмешательство

Нууу...

А почему вы нажали сюда?

Тестовые задания должны быть:

— однозначно понятными— сформулированными полностью— при этом достаточно краткими— не содержащими в себе подсказок— содержащими точку начала

выполнения задания— такими, чтобы респондент должен

был сначала решить, нужно ли в данное время выполнять действие

Проведение тестирования

1 Ввести респондента в задачу

2 Выяснить его ожидания от системы

3 Протестировать интерфейс

4 Выяснить, насколько оправдались ожидания

5 Завершить тест

Анкетирование

Пожалуйста, подчеркните любые слова, которые, на ваш взгляд, подходят для описания этого интерфейса:

Некрасивый Тусклый Устаревший

Тупой Полезный Удобный

Тормозящий Неэффективный Теплый

Дружественный Непредсказуемый Тоскливый

Наивный Управляемый Эффективный

Опасный Нечеткий Непоследовательный

Легкий Головоломный Ненадежный

Привлекательный Любительский Стандартный

Светлый Комфортабельный Запутанный

Приятный Плохой Загадочный

Профессиональный Безопасный Неприятный

Анк

ета:

Вла

дисл

ав Го

лова

ч

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

Дизайн всегда делается для людей

фото: evie22 (flickr)

Концептуальные подходы

Ориентация на пользователей

на задачи/цели пользователей

на деятельность пользователей

Анализ целей пользователяф

ото:

ligh

tpla

ce (fl

ickr

)

Действие состоит из следующих этапов:

формирование цели

формирование намерения

определение конкретных действий

выполнение действий

восприятие нового состояния системы

интерпретация изменений

оценка результата

1234567

Когнитивная (позновательная) психология

Оптимизация действия

Хороший дизайн:

нагляден

имеет ясную концептуальную модель

указывает возможные действия

позволяет легко выполнить действия

говорит, находится ли система в необх. сост.

имеет хорошее соотв. между сост. и его отобр.

имеет внятную обратную связь

1234567

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

ото:

ww

w.D

aveW

ard.

net (

flick

r)

Прототип должен создаваться и редактироваться быстро.

Прототип должен создаваться и редактироваться быстро

очень быстро.

Бумажный прототипф

ото:

Sha

wn

Med

ero

(A L

ist A

part

)

Бумажный прототипф

ото:

Sha

wn

Med

ero

(A L

ist A

part

)

Бумажный прототип

фот

о: jc

river

a.ne

t

Скетч, иллюстрирующий идею

илл.: Константин Горский, Артем Горбунов

Структурный скетч

Прототип с графическим дизайном

Axure RP Pro

Axure RP Pro

Ориентирована на создание веб-сайтов.

Генерирует кликабельный HTML и документацию в формате MS Word.

Windows, $589

Caretta GUI Design Studio

Caretta GUI Design Studio

Специализированное средство, позволяющее создавать интерфейсы в разных визуальных стилях, аннотации к ним, раскадровки и т. д.

Можно экспортировать прототип.

Windows, $499

Balsamiq Mockups

Подходит для быстрого создания макетов интерфейсов.

Прототипы выглядят «рисованными».

Web, $79

Balsamiq Mockups

Adobe InDesign

Изначально рассчитана для верстки полиграфических материалов, тем не менее подходит и для отрисовки прототипов.

На выходе: кликабельный PDF

Windows, Mac, $699

Adobe InDesign

Adobe Fireworks

Специально предназначена для прототипирования интерфейсов.

На выходе: кликабельный PDF или HTML

Windows, Mac, $299

Adobe Fireworks

Adobe Dreamweaver

Предназначена для HTML-верстки

На выходе: кликабельный HTML

Windows, Mac, $399

Adobe Dreamweaver

Microsoft Expression Blend

Интегрируется с Visual Studio. Прототип можно преобразовывать в конечный продукт. Использует технологии Silverlight или WPF.

Windows, $499

Microsoft Expression Blend

Microsoft Visio

Возможно, вы уже знакомы с Visio.Можно создавать кликабельные HTML-прототипы

Windows, $560

Microsoft Visio

Microsoft Powerpoint

Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами, создавая кликабельный прототип.

Windows, Mac, $229

Microsoft Powerpoint

Для простых задач можно использовать любое средство, позволяющее рисовать.

Для сложных лучше выбрать специализированный инструмент.

Прототипирование: мораль

Некоторые идеи интерактивного дизайна

Машина — друг человека

Все, что система может сделать самостоятельно, она должна сделать самостоятельно.

Логика!

В интерфейсах логика важнее эстетики.

илл.

: Мак

ар и

Сту

дия

Арт

емия

Леб

едев

а

Повелитель фотошопа

Тут всё понятноф

ото:

Tre

ndir.

com

А вот это уже не совсем ясно...ил

л.: С

туди

я А

ртем

ия Л

ебед

ева

А вот это уже совсем не ясно!ил

л.: С

туди

я А

ртем

ия Л

ебед

ева

Информативность и наглядность

Дизайн должен подсказывать, какие действия возможны в данный момент.

Дизайн должен быть наглядным.

Объект должен показывать способ своего использования своими неотъемлемыми свойствами.

Аффорданс (наглядность, affordance)

Вопрос:в каком разделе я нахожусь?

Вкладки

Пример: заполнение формы




Пример: четкое визуальное выделение



Теория близостиид

ея и

лл. А

ртем

ия Л

ебед

ева

Теория близостиид

ея и

лл. А

ртем

ия Л

ебед

ева

Закон Фиттса

Время прицеливания = k log2

2 × расстояние до объектаразмер

Время достижения цели прямо пропорционально дистанции до цели и обратно пропорционально размеру цели

Закон Фиттса

Принцип обратной связи

— Мгновенная проверка ввода— Индикация ошибок— Отображение прогресса— Подтверждение действия

Мгновенная проверка ввода

Роботизация

Обязательные для заполнения поля

Простота

Некоторые идеи графического дизайна

Художественный вкус

Вкус эстетический — способность человека к различению, пониманию и оценке прекрасного и безобразного в явлениях действительности и произведениях искусства

Мифы о дизайне

Есть правила (законы) хорошего дизайна.

Мифы о дизайне

Дизайнер должен уметь рисовать.

Незаметность дизайна

Незаметность дизайна

Пространственные отношения

Пространственные отношения

прим

.: M

ark

Boul

ton

Гармоничные пропорции

2

3

Сетка — друг и помощник дизайнера

Сетка — друг и помощник дизайнерапр

им.:

Арт

ем Го

рбун

ов

Пример какой-то статьи

Принцип модульной сетки очень прост. Полезная часть

страницы состоит из ячеек-модулей, образующих ряды и

колонки. На ячейки натягиваются объекты, содержащие

изображения, графики или текст, причем каждый объект

может занимать прямоугольник из целого числа ячеек.

Эта нехитрая идея позволяет создавать безупречно

аккуратные и красивые композиции.

Беспристрастный анализ любого творческого акта

показывает, что монтаж изящно образует культовый образ,

однако само по себе состояние игры всегда амбивалентно.

Иными словами, холерик дает импрессионизм, таким

образом, сходные законы контрастирующего развития

Solitude vs loneliness by Matilde B. @ Flickr


Пример какой-то статьи

Принцип модульной сетки очень прост. Полезная часть

страницы состоит из ячеек-модулей, образующих ряды и

колонки. На ячейки натягиваются объекты, содержащие

изображения, графики или текст, причем каждый объект

может занимать прямоугольник из целого числа ячеек.

Эта нехитрая идея позволяет создавать безупречно

аккуратные и красивые композиции.

Беспристрастный анализ любого творческого акта

показывает, что монтаж изящно образует культовый образ,

однако само по себе состояние игры всегда амбивалентно.

Иными словами, холерик дает импрессионизм, таким

образом, сходные законы контрастирующего развития

Solitude vs loneliness by Matilde B. @ Flickr


Еще пример компоновки

Принцип модульной сетки очень

прост. Полезная часть страницы

состоит из ячеек-модулей, образующих

ряды и колонки.


Фото слева:

OneEighteen @ Flickr

Фото справа:

TerData @ Flickr

Эта нехитрая идея позволяет создавать

безупречно аккуратные и красивые

композиции.

Еще пример компоновки

Принцип модульной сетки очень

прост. Полезная часть страницы

состоит из ячеек-модулей, образующих

ряды и колонки.


Фото слева:

OneEighteen @ Flickr

Фото справа:

TerData @ Flickr

Эта нехитрая идея позволяет создавать

безупречно аккуратные и красивые

композиции.

Пустое пространство



Цвет

Тон

0

30

60

90

120

150

180

210

240

270

300

Тон и яркость

0

30

60

90

120

150

180

210

240

270

300

100 90 80 70 60 50 40 30 20 10 0

Яркость100 90 80 70 60 50 40 30 20 10 0

Яркость и насыщенность

100

90

80

70

60

50

40

30

20

10

0

100 90 80 70 60 50 40 30 20 10 0

kuler.adobe.com

Есть некоторые стереотипы

«Красный олицетворяет опасность».

«Серый — скучный».




Да Нет

Универсальное решение

Онтогенез

Его экзистенциальная тоска выступает как побудительный мотив творчества, однако энтелехия заканчивает суггестивный классицизм, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления.

Гипотеза и теории

Фантазия трансформирует неизменный декаданс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Либидо монотонно начинает комплекс априорной бисексуальности, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Развивая эту тему, цвет трансформирует персональный инвариант, так Г.Корф формулирует собственную антитезу.

Универсальное решение с красным

Универсальное решение с розовым

Универсальное решение с оранжевым

Универсальное решение с зеленым

Цвет можно взять из изображенияИ

зобр

ажен

ия и

з пр

езен

таци

и Ja

son

Sant

a M

aria

Чем плохо такое сочетание цветов?

Цветовой контраст





Про шрифты и типографикуф

ото:

soo

zika

(flic

kr)

Виды начертаний

abcdef abcdefabcdef abcdefabcdef abcdef

Вариации насыщенности

abcdefghijklmnopabcdefghijklmnopabcdefghijklmnopabcdefghijklmnopabcdefghijklmnop

Полужирное и курсивное начертания

Как полужирное начертание, так и курсив предназначены для выделения отдельных слов, фраз или блоков текста в наборе.





Классическая антиква

Переходная антиква

Brick quiz whangs jumpy veldt fox! Brick quiz whangs jumpy veldt fox!

Новая антиква

Кларендон

Футура

Гельветика

The quick brown fox jumps over the lazy dog.

Мета

ДефисМинус Тире

Дефис, минус и тиреил

л.: А

ртем

ий Л

ебед

ев

Дефис употребляется, во-первых, для присоединения каких-либо частиц или префиксов, во-вторых, в словосочетаниях. А тире — для обозначения пауз в тексте или для выделения прямой речи.

Дефис

В русском языке традиционно применяются «ёлочки», а для «кавычек „внутри“ кавычек» — „лапки“.

Кавычки

Как сверстать текст красиво

Функция, выпуклая кверху

Отсюда естественно следует, что длина вектора изящно упорядочивает скачок функции, что несомненно приведет нас к истине. Рациональное число последовательно транслирует нормальный предел функции, что неудивительно. Целое число категорически стабилизирует эмпирический многочлен, таким образом сбылась мечта идиота — утверждение полностью доказано. Подынтегральное выражение необходимо и достаточно.

Правда, некоторые специалисты отмечают, что матожидание масштабирует абстрактный метод последовательных приближений, таким образом сбылась мечта идиота — утверждение полностью доказано. Собственное подмножество транслирует тригонометрический интеграл от функции, обращающейся в бесконечность вдоль линии, при этом, вместо 13 можно взять любую другую константу. Минимум, следовательно, соответствует интеграл по ориентированной области, таким образом, утверждение полностью доказано. Тройной интеграл расточительно проецирует косвенный математический анализ, что известно даже школьникам.

Нормальное распределение непосредственно переворачивает интеграл Гамильтона, что известно даже школьникам. Первообразная функция притягивает критерий интегрируемости, что несомненно приведет нас к истине.

Двойной интеграл, как следует из вышесказанного, стремительно синхронизирует стремящийся определитель системы линейных уравхорошонений, что несомненно приведет нас к истине.

Скалярное произведение транслирует интеграл по бесконечной области, откуда следует доказываемое равенство. Представляется логичным, что прямоугольная матрица очевидна не для всех.















прим

.: M

ark

Boul

ton










Отсюда естественно следует, что длина вектора изящно упорядочивает

скачок функции, что несомненно приведет нас к истине. Рациональное

число последовательно транслирует нормальный предел функции, что

неудивительно. Целое число категорически стабилизирует эмпирический

многочлен, таким образом сбылась мечта идиота — утверждение

полностью доказано. Подынтегральное выражение необходимо и

достаточно.

Правда, некоторые специалисты отмечают, что матожидание

масштабирует абстрактный метод последовательных приближений,

таким образом сбылась мечта идиота — утверждение полностью доказано.

Собственное подмножество транслирует тригонометрический интеграл

от функции, обращающейся в бесконечность вдоль линии, при этом,

вместо 13 можно взять любую другую константу. Минимум, следовательно,

соответствует интеграл по ориентированной области, таким образом,

утверждение полностью доказано. Тройной интеграл расточительно

проецирует косвенный математический анализ, что известно даже

школьникам.

Нормальное распределение непосредственно переворачивает интеграл

Гамильтона, что известно даже школьникам. Первообразная функция

Скалярное произведение

транслирует интеграл по

бесконечной области, откуда

следует доказываемое

равенство. Представляется

логичным, что прямоугольная

матрица очевидна не для всех.




























































































полностью доказано. Подынтегральное выражение необходимо

и достаточно.













притягивает критерий интегрируемости, что несомненно приведет нас

к истине.














Было: Стало:

Оформляем таблицу

ФИО Баланс ИНН Адрес Примечание

Николай Римский-Корсаков

252,15 руб. 153111 Степанова, 17, корп. 2

Игре на форте-пиано композитор обучался дома, а потом в пансионе, где уроки музыки были в числе прочих образовательных дисциплин.

Модест Мусоргский

312,7 руб. 240345 Академика Сахарова, 8

Автор знаменитых опер на темы русской истории, славянской мифологии а также и на другие национальные темы

Игорь Стравинский

450 руб. 687565 Фрунзенская набережная, 11

Русский композитор, дирижёр и пианист, один из крупнейших представителей мировой музыкальной культуры XX века




252,15 руб.

153111 Степанова, 17, корп. 2

Игре на фортепиано композитор обучался дома, а потом в пансионе, где уроки музыки были в числе прочих образовательных дисциплин.







Михаил Глинка 611,89 руб.

123010 Дубосеков-ская, 4

Патриотическая песня Михаила Глинки в период с 1991 по 2000 год являлась официальным гимном Российской Федерации.


ФИО Баланс, руб.

ИНН Адрес Примечание


252,15 153111 Степанова, 17, корп. 2



312,7 240345 Академика Сахарова, 8



450 687565 Фрунзенская набережная, 11


Михаил Глинка 611,89 123010 Дубосеков-ская, 4






252,15153111 Степанова, 17, корп. 2



312,70240345 Академика Сахарова, 8



450,00687565 Фрунзенская набережная, 11


Михаил Глинка 611,89123010 Дубосеков-ская, 4






252,15 153111 Степанова, 17, корп. 2






450,00 687565 Фрунзенская набережная, 11


Михаил Глинка

611,89 123010 Дубосеков-ская, 4






252,15 153111 Степанова, 17, корп. 2















252,15 153111 Степанова, 17, корп. 2











Было: Стало:





252,15 153111 Степанова, 17, корп. 2













252,15 руб. 153111 Степанова, 17, корп. 2

Игре на форте-пиано композитор обучался дома, а потом в пансионе, где уроки музыки были в числе прочих образовательных дисциплин.







Михаил Глинка 611,89 руб. 123010 Дубосековская, 4


Основные контролы и правила их использования

Кнопка

Кнопка — это любой элемент, взаимодействие с которым ограничивается нажатием.

Кнопки

Текст в неопределенной форме глагола

Есть достаточное пустое пространство

между кнопками

Недоступные действия заблокированы

Чекбоксы и радиокнопки

Радиокнопок не меньше двух;

одна обязательно установлена

Кликабельные подписи к чекбоксам и радиокнопкам

Действие запускается отдельно от выбора

Раскрывающийся список

В списке не слишком мало и не слишком много

значений

Список имеет достаточную ширину

По умолчанию стоит наиболее вероятное значение

Элементы в списке отсортированы

Заключение

Дизайн — это впечатления

Тестирование юзабилити очень важно!

Дизайн всегда делается для людей

Дизайн должен быть простым

Дизайн спасёт мир

Здорово использовать инструменты по назначению

Apple Human Interface Guidelineshttp://developer.apple.com/ue/

Windows User Experience Interaction Guidelineshttp://msdn.microsoft.com/ en-us/library/aa511258.aspx

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

Alan Cooper About Face: The essentials of Interaction Design

Wiley, 2007

Jef Raskin The Humane Inter-face: New Direc-tions for Designing Interactive Systems.

Addison-Wesley Professional, 2000

Bruce Tognazzini Tog on Interface

Addison-Wesley Professional, 1992

По юзабилити

Jacob Nielsen Designing Web Usability: the Practice of Simplicity

New Riders, 1999

Steve Krug Don’t Make Me Think! A Common Sense Approach to Web Usability

New Riders, 2005

Влад Головач Цикл статей на http://www.usethics.ru/lib/

По графическому дизайну и типографике

Дмитрий Кирсанов Веб-дизайн

Санкт-Петербург, 2001

Josef Muller-Brockmann Grid Systems in Graphic Design

Arthur Niggli, 1996

Robert Bringhurst

The Elements of Typographic Style

Hartley and Marks Publishers, 2004

По представлению информации

Edward Tufte The Visual Display of Quantitative Information

Edward Tufte Envisioning Information

Edward Tufte

Visual Explanations: Images and Quanti-ties, Evidence and Narrative

Edward Tufte Beautiful Evidence

По образу мышления

Donald A. Norman The Design of Everyday Things

Basic Books, 2002

Alan Cooper

The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How To Restore The Sanity

Sams, 1999

Артемий Лебедев

Ководство

http://www.artlebedev.ru/ kovodstvo/

Издательство студии Артемия Лебедева, 2007

Простота — необходимое условие прекрасного.

Л. Н. Толстой.