45.05M
Категория: ИнтернетИнтернет

Принципы разработки пользовательского интерфейса

1.

Принципы разработки
пользовательского интерфейса

2.

“Проектирование — это гораздо больше, чем просто
компоновка, организация и даже редактирование;
проектировать — значит придавать ценность и смысл,
вносить ясность, упрощать и пояснять, преобразовывать,
придавать лоск, привлекать внимание, убеждать и даже,
возможно, развлекать” — Пол Рэнд
2

3.

Интерфейс — общая граница между двумя
функциональными объектами, требования к которой
определяются стандартом; совокупность средств, методов и
правил взаимодействия (управления, контроля и т. д.) между
элементами системы (источник: wikipedia.org).
3

4.

Главная задача — ясность
Ясность — это первая и самая главная задача любого интерфейса. Чтобы
интерфейс эффективно помогал людям добиваться своих целей, он должен
обладать следующими характеристиками.
Во-первых, он должен быть узнаваемым, а его назначение — очевидным
для пользователя.
Во-вторых, люди должны понимать, с чем они взаимодействуют через
интерфейс.
4

5.

Ключевое назначение интерфейсов — взаимодействие
Интерфейсы существуют, чтобы люди могли взаимодействовать с нашим миром.
Через интерфейс мы можем прояснить, проиллюстрировать, дать возможность,
показать взаимосвязь, объединить людей или разделить, управлять ожиданиями
и давать доступ к услугам.
Процесс проектирования интерфейсов.
5

6.

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

7.

Ларри Константин, идеолог концепции дизайна, ориентированного на
использование, в книге «SoftwareForUse», написанной им в 1999 г. совместно
с Люси Локвуд, представил следующие принципы разработки
интерактивных систем:
Структурный принцип
Принцип простоты
Принцип обратной связи
Принцип толерантности
Принцип повторного использования
7

8.

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

9.

Бен Шнейдерман, в своей книге «DesigningtheUserInterface»
сформулировал восемь «золотых»:
1.Будьте последовательны.
3.Используйте обратную связь.
4.Создавайте
законченные
диалоги.
5.Используйте простые процедуры обработки ошибок.
6.Обеспечьте простой механизм отмены действий.
7.Создайте впечатление, что пользователь управляет всеми
процессами.
8.Уменьшите загрузку кратковременной памяти.
9

10.

10

11.

11

12.

ВВЕДЕНИЕ
Создание веб-сайта организации позволяет сделать ее деятельность узнаваемой и
заявить о себе широкому кругу лиц.
В современном динамичном мире, который характеризуется быстрым развитием
технологий, а большая часть информации получается пользователями из интернетсреды, разработка собственного веб-ресурса организации позволит использовать
его не только как информационную площадку, но, в том числе, и как
маркетинговый инструмент.
Веб-сайт позволяет информировать о деятельности организации, рекламировать,
формировать имидж компании и доверие к ней, тем самым повышая лояльность
потенциальных и реальных клиентов.
Благодаря профессиональному планированию, проектированию, разработке и
тестированию веб-ресурса, а также его продвижению организация может не только
заявить о себе, но и получить дополнительную пользу от своей деятельности.
12

13.

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

14.

Для достижения поставленной цели необходимо решить ряд взаимосвязанных
задач:
определить цели и задачи сайта кофейни «ACoffee»;
проанализировать целевую аудиторию и сайты схожих тематик
(например, ресурсы кофеен, небольших кондитерских, пекарен) с выявлением их
положительных и отрицательных сторон;
разработать техническое задание на разработку сайта кофейни «ACoffee»;
спроектировать информационную структуру сайта указанного заведения;
осуществить UI/UX проектирование сайта кофейни «ACoffee»;
спроектировать дизайн вышеназванного сайта;
разработать клиентскую и серверную часть сайта кофейни «ACoffee»,
спроектировать необходимую для его корректного функционирования базу
данных;
наполнить указанный сайт контентом, в том числе качественным
графическим и маркетинговым материалом;
осуществить тестирование разработанного сайта для выявления ошибок,
а также проверить наличие несоответствий между требованиями, указанными в
разработанном техническом задании, и их реализацией, а также спланировать
(либо провести) первичную оптимизацию сайта.
14

15.

1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ И СОСТАВЛЕНИЕ ТЕХНИЧЕСКОГО ЗАДАНИЯ
Задачи разработки – это конкретные функции, которые должен выполнять сайт.
В качестве задач создаваемого сайта кофейни «ACoffee» можно выделить
следующие:
- предоставить возможность посетителю сайта ознакомиться с информацией о
кафе (контакты, меню, время работы и т.д.);
- реализовать функцию, позволяющую зарегистрироваться на сайте;
- предоставить возможность пользователю сделать предзаказ;
реализовать на сайте функцию, позволяющую посетителю оставить отзыв
о деятельности и предлагаемых товарах кофейни «ACoffee».
15

16.

1.2
Определение целевой аудитории сайта
Целевая аудитория сайта, целевая посещаемость, целевые посетители сайта
– группа интернет-пользователей, на которую сфокусировано содержание сайта; круг
посетителей, заинтересованных в информации, товарах или услугах, представленных
на сайте.
Целевые посетители точно знают в получении какой информации они
заинтересованы и какой именно товар или услугу желают приобрести.
16

17.

17

18.

18

19.

19

20.

20

21.

1.3
21
Анализ сайтов конкурентов

22.

22

23.

23

24.

24

25.

25

26.

26

27.

27

28.

28

29.

29

30.

30

31.

1.4
31
Бриф и техническое задание

32.

32

33.

33

34.

34

35.

35

36.

36

37.

37

38.

38

39.

39

40.

40

41.

41

42.

Общее описание проекта.
Назначение проекта. Основная цель Сайта – создание площадки для
предоставления информации о деятельности и предоставляемых услугах кафе.
Дополнительно Сайт предназначен для формирования и улучшения
положительного образа кофейни «ACoffee», формирования доверительного
отношения к качеству предлагаемых товаров и услуг.
Функционал, реализуемый Сайтом:
создание, размещение, структурирование и хранение в единой базе
данных информационных ресурсов Заказчика;
редактирование и развитие информационных ресурсов с помощью
системы удаленного администрирования Сайта посредством сети Интернет.
42

43.

В результате должен быть создан информационный ресурс с современным
дизайном, а также полным набором функциональных характеристик и сервисов для
удобной навигации на Сайте, также Доступ к ресурсам Сайта должен быть
представлен пользовательской и административной частями.
Это позволит эффективно и безопасно наладить работу с пользователями
Сайта.
Основные функции. Пользовательская часть Сайта будет включать:
систему навигации по Сайту с возможностями передвижения по структуре
Сайта с любой страницы;
регистрация на Сайте для возможности оставить отзыв или сделать
предзаказ.
43

44.

44

45.

45

46.

2 ПРОЕКТИРОВАНИЕ САЙТА
46
2.1
Информационная архитектура
2.2
UI/UX проектирование

47.

2.3
Проектирование дизайна сайта
Цветовая гамма сайта (#151417, #d4ab70, #4e352e, #b8b3af) показана
на рисунке и подобрана таким образом, чтобы подчеркнуть отношение
к кофейне.
47

48.

48

49.

49

50.

50

51.

51

52.

52

53.

53

54.

54

55.

55

56.

56

57.

57

58.

58

59.

59

60.

60

61.

61

62.

62

63.

3 РАЗРАБОТКА САЙТА
3.1
3.2
63
Выбор технологий для разработки сайта
Разработка базы данных, клиентской и серверной части

64.

64

65.

65

66.

66

67.

67

68.

68

69.

69

70.

70

71.

71

72.

72

73.

73

74.

ТЕСТИРОВАНИЕ, ПОЗИЦИОНИРОВАНИЕ, ПРОДВИЖЕНИЕ САЙТА В СЕТИ ИНТЕРНЕТ
4.1
Тестирование сайта
ЗАКЛЮЧЕНИЕ
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
74

75.

75

76.

76
English     Русский Правила