Веб Дизайн

Лекция 1, Введение

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Ноябрь 2014

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

com

Терминология

• Что такое Веб-дизайн?

• Что такое дизайн интерфейсов?

2

World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть

• Глобальная гипертекстовая система, использующая Интернет в качестве транспортного средства. Сеть серверов, по определению её основателя Тима Бернес-Ли (Tim Bernes-Lee) , — распределённая гетерогенная информационная мультимедиа-система коллективного пользования;

3

4

Tim Bernes-Lee

World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть

5

• С серверов поставляются HTML документы, связанные между собой гипертекстовыми ссылками. Просмотр документов осуществляется с помощью специальных программ (browser), переход на другой документ выполняется щелчком на ссылке.

World Wide Web

6

Дизайн

1. Схема, проект, машинный архив проекта например, ИС при автоматизированном проектировании;

2. Разработка, проектирование, конструирование;

3. Фаза в разработке ПО, на которой функциональные спецификации транслируются в текст программы;

4. Разрабатывать, проектировать, конструировать.

7

Дизайн сущ м Конструирование вещей,

машин, интерьеров, основанное на

принципах сочетания удобства,

экономичности и красоты.

Словарь ОРФО

Веб-дизайн (web-design)

• Частный случай промышленного дизайна. Вид художественно-проектной деятельности, направленный на создание и обеспечение удобства использования Веб ресурсов;

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

8

Интерфейс

• Интерфейс (от англ. interface — поверхность раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы.

9

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

• Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством;

• Взаимодействием человека с компьютером занимается наука Human ComputerInteraction (HCI).

10

История гипертекста

11

1945. MEMEX

• В 1945 году ВэнниверБуш, руководитель бюро научных исследований и разработок правительства США,опубликовал статью “Пока мы мыслим”, в которой впервые была сформулирована идея гипертекста.

12

1945. MEMEX• “Обсудим устройство

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

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

13Источник: http://friends.pomorsu.ru

1962. NLS (oN Line System)

• В 1962 году Дуглас Энгельбарт в лаборатории Стэнфордского института разработал NLS.

• Файлы в NLS содержались как иерархии “утверждений”.

• Можно было установить любое число ссылочных связей - “утверждений” друг с другом, как внутрифайловых, так и межфайловых.

• Все это управлялось с помощью консоли, с графическим оконным интерфейсом, навигация по которому осуществлялась с помощью первого в истории манипулятора мышь.

14

1962. NLS (oN Line System)

15

http://www.youtube.com/watch?v=a11JDLBXtPQ&feature=relmfu

1965. Xanadu

• Тэд Нельсон разрабатывает гипертекстовую систему Xanadu® — универсальный архив для хранения информации любого типа: текста, графики и т.п.;

• Именно здесь впервые прозвучали слова гипертекст и гипермедиа;

• Система никогда не была реализована в том виде, в котором была задумана;

• Тем не менее, проект Xanadu и в настоящее время развивает свои идеи (http://xanadu.com).

16

Xanadoc

17

1978. Aspen Movie Map

• Группа ученых Массачусетского технологического института во главе с Андреем Липпманомвоплотила идею взаимосвязанной сети спрайтовых картинок и даже создания фильмов с меняющимся по требованию пользователя сюжетом;

• Система предлагала виртуальное путешествие по Аспену (шт. Колорадо);

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

18

1978. Aspen Movie Map

19

http://www.youtube.com/watch?v=Hf6LkqgXPMU

1987. Hypercard

• Билл Аткинсон, сотрудник Apple Computers создает для собственных нужд HyperCard, чтобы отслеживать появление своих статей в прессе;

• Его заинтересовали алгоритмы эффективного поиска и упаковки данных, и он решил реализовать новые замыслы в общедоступном пакете;

• Он смог перенести каталог из ста тысяч книжных карт библиотеки Лос-Гейтос в формат HyperCard, в результате чего поиск в HyperCard по запросу к 15-мегабайтной БД сократился с 10 мин до 2 с.

20

1987. Hypercard

21

World Wide Web

• Осенью 1990 года сотрудники CERN получили в пользование первый "веб сервер" и "веб браузер", написанные Тимом Бернерсом-Ли в среде NeXTStep;

• Летом 91-го года проект "WWW" пересёк океан и влился в американский проект "Internet". Возникает параллельный мир новорожденных аббревиатур: URL, HTTP, HTML.

22

Information Management: A ProposalTim Berners-Lee, CERN March 1989, May 1990

23

Концептуальная модель веб дизайна

• Перед тем, как мы решим, что

мы делаем, мы должны

решить, почему мы это делаем.

• Jeffrey Veen

• The Art & Science of Web Design

24

Издания на бумаге и в сети

• Стандартное печатное издание базируется на тексте и изображениях;

• При публикации в веб добавляется третья составляющая — интеракция, обеспечиваемая кодом. Пользователь работает с вебом интерактивно: Покупка билетов;

Общение в форуме;

Онлайновое обучение;

Поиск информации.

25

Основа концептуальной модели Веб:Текст – Изображение - Код

26

Расширение модели

• Мир публикаций Веб расширяет модель “Текст – Изображение - Код” к модели “Презентация – Структура - Поведение”.

27

Презентация – Структура - Поведение

• Презентация — как эта организация представлена пользователю визуально;

• Структура — как нечто организовано и оптимизировано для легкого понимания и использования;

• Поведение — каким образом пользователи могут взаимодействовать с продуктом и каково будет поведение продукта в результате этого взаимодействия.

28

Команда разработчиков• При дальнейшем изучении внутреннего

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

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

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

29

Структура команды разработчиков

30

Упрощенный подход к Веб-дизайну

• Есть программисты и графические дизайнеры, (есть код и визуальный шаблон), нет информационной архитектуры.

31

Введение в информационную архитектуру

• IA отличается от визуального дизайна или программирования тем, что фокусируется на структуре веб сайта, а не на его внешнем виде или функциональности;

• Целью IA является построение веб сайта, простого в использовании, отвечающего целям как клиента (заказчика), так и пользователя.

32

Пример: сайт заказа завтракаYourbreakfast.comМы предлагаем

интегрированное

решение для легкого

решения утренних

потребностей.

Заполните форму для

выяснения ваших

предпочтений к завтраку

Ваш персональный

конфигуратор завтрака

готов. Пожалуйста

залогиньтесь.

ЛогинНаша история Пресс релизы

Горячие напиткиСоки Что намазываем Хлеб

Чай Джем Арахисовое маслоКаша

Кофе Сыр 33

Пример 1: сайт заказа завтракаYourbreakfast.comМы предлагаем

интегрированное

решение для легкого

решения утренних

потребностей.

Заполните форму для

выяснения ваших

предпочтений к завтраку

Ваш персональный

конфигуратор завтрака

готов. Пожалуйста

залогиньтесь.

ЛогинНаша история Пресс релизы

Горячие напиткиСоки Что намазываем Хлеб

Чай Джем Арахисовое маслоКаша

Кофе Сыр 34

Не сфокусирован на пользовательских нуждах

Извилистая функциональность

Противоречивая организация

Плохая Информационная Архитектура

• Плохая Информационная Архитектура извилиста, противоречива и сложна, без всякой на то необходимости. Она затрудняет использование веб сайтов.

35

Пример 2: другой сайт заказа завтрака

Breakfasttable.comСсылка: Такой же

завтрак, как вчера

Соки Арахисовое масло

Чай Сыр

ДжемКофе

БутербродыНапитки Каша

36

• Хорошая Информационная Архитектура проста, ясна и

элегантна. Делает использование веб сайта максимально

простым.

Что делает информационная архитектура?

• Корневая задача IA — организация информации на веб сайте таким образом, чтобы пользователи могли находить то, что им нужно и достигать своих целей (пример –покупка продуктов в большом магазине);

• Чем счастливее будет пользователь, тем больше он купит продуктов или услуг, проведет на сайте больше времени, что сделает бизнес более прибыльным;

• Информационная Архитектура — это не наука о диаграммах, это наука о коммуникации.

37

Задачи Информационной Архитектуры

1. Изучение пользователя: что делают люди, чтобы достичь своих целей, посещая веб сайт?

2. Определение содержания и функциональности: как это должно помочь пользователю достичь своих бизнес целей?

3. Разработка организационных схем: как веб сайт должен быть организован?

4. Разработка интерфейса совместно с графическим дизайнером.

5. Отслеживание этих задач в процессе построения сайта.

38

IA в реальной жизни и в Веб

39

Цели и способы организации содержания

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

• Бизнес цели и цели пользователей управляют тем, какая организационная схема используется.

40

Разные возможности организации:Вариант 1.

Добро пожаловать

к столу для

завтрака

БутербродыНапитки Каша

41

Разные возможности организации:Вариант 2.

Добро пожаловать

к столу для

завтрака

Завтраки для занятых

женщин

Завтраки для школьников Завтраки для всех

42

Разные возможности организации:Вариант 3.

Добро пожаловать

к столу для

завтрака

Поделитесь своей

историей о завтраке

Посмотрите, что едят

знаменитые люди

Зарегистрируйтесь для

международного

виртуального стола для

завтрака

43

Разные возможности организации:Вариант 4.

Добро пожаловать

к столу для

завтрака

ХлебВыберите продукт Каша

44

Что является результатом IA?(Чему мы научимся?)

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

1. Описание сайта с точки зрения содержания и организации — чаще всего в виде карты сайта;

2. Функциональное описание, объясняющее как, предположительно, будет работать Веб сайт.

• Уровень детализации в этих описаниях может широко варьироваться.

45

Список содержания и организация

Yourbreakfast.comМы предлагаем

интегрированное

решение для легкого

решения утренних

потребностей.

Заполните форму для

выяснения ваших

предпочтений к завтраку

Ваш персональный

конфигуратор завтрака

готов. Пожалуйста

залогиньтесь.

ЛогинНаша история Пресс релизы

Горячие напиткиСоки Что намазываем Хлеб

Чай Джем Арахисовое маслоКаша

Кофе Сыр

• IA отвечает за список всего содержания и структуры веб сайта. Чаще всего они представлены в виде карты сайта, таблицы содержания, функциональных диаграмм.

46

Список содержания

47

Описание функциональности

• Описание функциональности и потока задач описывает, как работает веб сайт, как совместно работают отдельные страницы и какие задачи могут выполнить люди.

• Представление также может выражаться в разных формах, например, сценариями и блок-схемами.

48

Пример:Сценарий 1.

• Персонаж: Игорь

• Функция: Предложение запомнить завтрак

• Сценарий: Игорю нравится каждый день завтракать одинаково.

Поэтому каждый день он заходит на сайт и делает один и тот же

выбор. По прошествии времени веб сайт замечает это и предлагает

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

внимание на иконку, предлагающую эту услугу и подтверждает свой

выбор. Отныне ему надо только щелкнуть по специальной ссылке,

чтобы получить свой любимый завтрак.

49

Пример:Блок-схема 1.

Пользователь

начинает выбор

завтрака

Больше, чем

пять раз?

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

?

В следующий раз

показать ссылку

Да

Да

Нет

Нет

Нет

Страница завтрака Предложить

запомнить завтрак

Такой же, как

и в прошлый

раз?

Увеличиваем

счетчик (+1)

50

Модульная сетка (каркас)

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

• Модульные сетки разрабатываются информационным архитектором совместно с визуальным дизайнером.

• Они полезны, поскольку позволяют сфокусироваться на структуре пользовательского интерфейса, без затрат на дорогое обновление визуального дизайна.

51

Пример:Модульная сетка 1.

Breacfast.com

Моя учетная запись

Главная Напитки Хлеб Каша

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

Breakfast.com

Заказать такой же завтрак, как и вчера

Реклама. Фото: Яйцо, бутерброд и кофе всего за за 60 крон

Реклама.Фото: Яйцо, тост, круасан и кофе всего за за 55 крон

Реклама.Фото: Яйцо, тост, круасан и сок всего за за 58 крон

Как мы работаем?На Вы можете заказать любой завтрак на свой вкус и он будет бесплатно доставлен Вам на дом в удобное для Вас время.

breakfast.com

Узнать больше...

ПОДПИШИТЕСЬ И ПОЛУЧИТЕ БЕСПЛАТНУЮ ДОСТАВКУ!

О нас Политика приватности Вакансии Пресса / / /

52

Парная работа: поиск необходимостей

1. Интервьюируйте партнера: задача кратко описать утро студента:

– Какие активности студент делает каждое утро?

– Что ему мешает? Чего не хватает?

– Какая информация ему нужна?

Интервью 10 минут, затем смена ролей.

2. Описать проблемы

3. Как можно помочь студенту решить часть утренних проблем? Описать возможные варианты

4. Выступить с 2-х минутной презентацией результатов

53Проектирование Пользовательских Интерфейсов

Задание на дом №1:

• Создать краткое описание вашего будущего проекта: Имя сайта;

Краткая характеристика бизнеса заказчика (размер учреждения, оборот, персонал, производство, склады);

Описание продукции и услуг;

Целевая аудитория;

Бизнес задачи данного сайта (Увеличение продаж, реклама компании, поиск партнеров и т.п.).

• Результат до следующего занятия опубликовать в LePress

54