You are on page 1of 28

Ministerul Educaţiei al Republicii Moldova

Universitatea Tehnică a Moldovei
Facultatea Calculatoare Informatică şi Microelectronică
Catedra Informatica Aplicata

Teză de curs
la disciplina ―Metodologia şi etica cercetărilor ştiinţifice‖
ANALIZA EXPERIENȚELOR ÎN MANAGEMENTUL MOCK-UP-URILOR

A efectuat: Alexandr Carp
Studentul grupei MAI-131M
A verificat: dr, conf. univ. Victoria Maxim

Chişinău – 2014

ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ ....................................................................................................................................3
1.

2.

3.

ИССЛЕДОВАНИЕ МОКАПОВ............................................................................................5
1.1.

Вайрфрейм .......................................................................................................................6

1.2.

Прототип ..........................................................................................................................8

1.3.

Мокап ............................................................................................................................... 9

ВЛИЯНИЕ МОКАПОВ НА КОНЕЧНЫЙ РЕЗУЛЬТАТ ...................................................9
2.1.

Юзабилити .....................................................................................................................10

2.2.

Методы исследования юзабилити: ..............................................................................11

2.3.

Ошибка при создании готового решения ...................................................................13

2.4.

Распространенные ошибки юзабилити .......................................................................17

ПРИМЕРЫ И ПОДХОДЫ К СОЗДАНИЮ МОКАПОВ..................................................21
3.1.

Юзабилити плоского дизайна ......................................................................................25

ЗАКЛЮЧЕНИЕ............................................................................................................................ 26
БИБЛИОГРАФИЯ .......................................................................................................................28

2

эффективности веб-ресурса в целом. Предмет изучения лицензионной работы: Для достижения поставленной задачи и для соответствия с миссией данной работы. были изучены основные законы по созданию сайтов. опасно уменьшением показателей конверсии. что пользователь измается ждать открытия и на данный интернет-ресурс не заглянет. Актуальность: Трудно переоценить существенность хорошо реализованных юзабилити и дизайна. Если за эти мгновения страница полностью не открывается. Любые мероприятия по проектированию юзабилити лучше. которые также называются юзабилити и проанализирован современный подход к решению нетривиальных задач по созданию сайтов. осмотр страницы реализуется посетителем во время первых секунд. Что. как следствие. в которой изучены инструменты для создания мокапов и их история. чем никакие. и также для анализа мокапа после получения готовой версии сайта. А это очень плохо сказывается в их восприятии веб-ресурса. Мотивация выбора темы курсовой работы: Курсовая работа является теоретической основой для создания мокапа. в свой черед. Сообразно исследованиям психологов. так как для полного изучение юзабилити нужно основываться на дизайнерской деятельности и работу с цветами. вовлеченным в процесс создания того или иного проекта: клиенту. Цели работы: Исследование техник по созданию мокапов и их влияние на юзабилити сайтов Задачи лицензионной работы: Проанализировать влияние современных технологии на юзабилити сайтов и на технологии создания мокапов. Взяв за основу первую часть работы. помогая избежать проблем на поздних стадиях разработки [1]. трафика и. далее описаны разные подходы к созданию сайтов. Прототипы облегчают жизнь всем людям. Тема данной работы не полностью раскрывает вопрос юзабилити. которые предъявляются к этим характеристикам. Невнимание к требованиям. Даже имея минимальные ресурсы всегда можно что-то сделать.ВВЕДЕНИЕ Прототипы стали незаменимым этапом профессиональной разработки вебпроектов и программного обеспечения. дизайнерам и разработчикам. менеджерам. приводит к внушительным временным затратам посетителей и необходимости выполнять посетителями излишние действия. Создать 3 . то достаточно уверенно можно сказать. Прототип визуализирует конечный продукт и помогает выявить серьезные проблемы на самых ранних этапах.

Вопросом являлось. «методы исследования юзабилити». Подглава «юзабилити» является логическим ответом на вопрос изученный в этой главе.теоретическую основу для проектирования мокапа. Третья подглава «ошибка при создании готового решения» является описанием одного из типичных подходов к созданию мокапов. на что действительно влияет мокап. их предназначение и близкие к ним по целям использования инструменты. цели и предмет изучения. которые также зачастую входят в процесс создания сайтов. Этот пример напрямую описывает ошибку в менеджменте создания сайта. В введении представлены задачи. «ошибка при создании готового решения» и «распространенные ошибки юзабилити». мы сузили его эффект только на юзабилити. 4 . В этой главе проанализированны примеры созданных мокапов и подходы к их созданию. Подглава «юзабилити плоского дизайна» описывает стиль в дизайне интерфейсов который улучшает юзабилити сайта. и так как нас не интересовал вопрос времени и денег затраченных на его создание. Структура курсовой работы: Данная работа структурно разделена на введение. которые допускаются при создании мокапов. Третья глава называется «ПРИМЕРЫ И ПОДХОДЫ К СОЗДАНИЮ МОКАПОВ». Это нужно для того что. Первая глава называется «ИССЛЕДОВАНИЕ МОКАПОВ» и описывает мокапы. Вторая глава называется «ВЛИЯНИЕ МОКАПОВ». с последующим исследованием его юзабилити. Эта глава включает в себя четыре подглавы: «юзабилити». три главы и заключение. и в частности мокапа. Четвѐртая подглава «распространенные ошибки юзабилити» описывает самые типичные ошибки. Этот стиль учитывается при создании мокапов и наилучшим образом подходит для современных компьютеров. которая влияет негативно на весь процесс создания сайта.бы обратить внимание на влияние опыта дизайнеров на процесс создания мокапа. Подглава «методы исследования юзабилити» описывает какими инструментами возможно исследовать юзабилити готовово продукта.

Рисунок 1. Публикация 10. По историческим истокам. Бриффинг 2. Техническое задание 3. обязательным для создания правильно организованного сайта. 5 .(набросок. ИССЛЕДОВАНИЕ МОКАПОВ Создание мокапа сайта это один из этапов. и их присутствие на ряду с порядкам их расположения является важным фактором. Создание прототипа (вайфрейма и мокапа) 4. Разработка дизайна 5. Этапами создания сайта считаются: 1. Наполнение сайта контентом 8. Поддержка (продвижение) Sketch (скетч) . Вѐрстка 6. эскиз) — первоначальный моментальный набросок от руки того.1. так называемым менеджментом трудового процесса. что бредет в голову [2]. некоторые этапы появились позже других. Тестирование 9. Пример вайрфрейма. Программирование 7.

так и комплексной технической документацией. чтобы обозначить ссылки). хотя это выглядит именно так. их можно заменить заглушками — накрест перечѐркнутыми прямоугольниками с соответствующим описанием. например. Вайрфрейм Вайрфрейм — это низко детализированное представление дизайна [3]. Так как они показывают взаимодействие пользователя с интерфейсом в отдельных статичных моментах. По сути. что вайрфрейм даѐт неполное представление о конечном результате. что в вайрфрейме должны быть представлены все важные элементы конечного продукта. их нужно сопровождать текстовыми комментариями: как короткими пояснениями. Внешний вид должен быть эстетичным. Чѐрно-серо-белый — типичная палитра вайрфрейма (вы можете добавить синий. Вайрфреймы должны создаваться быстро и большую часть этого времени следует провести за обсуждениями с командой и размышлениями. вы можете оценить планирование города. хороший вайрфрейм ложится в основу чистового дизайна и определяет направление работы для всей команды. Само таскание серых блоков по экрану должно занимать минимум времени. менеджеров — всем им нужен хорошо сработанный вайрфрейм. но не можете увидеть его красоту. Где?  Описание взаимодействия пользователя с интерфейсом и его примерную визуализацию.1. Запомните. дизайнеров. Обычно вайрфреймы используются как документация по проекту. «Представлены» — это ключевое слово. Смотря на карту. Как? Вайрфрейм — не просто бессмысленный набор серых блоков. но в очень упрощѐнном виде. Считайте это скелетом вашего дизайна и запомните. которое поможет вам найти правильный баланс между уровнем детализации и скоростью создания. Что?  Информационную структуру. 6 . нужно создать цельное представление конечного дизайна и не пропустить ни одного важного элемента. но очень простым. Если. Нельзя уходить в детали. вы создаѐте карту города. Вы описываете фронт работ по проекту для всех задействованных лиц: разработчиков. копирайтеров. при необходимости. Он чѐтко должен показывать:  Основные группы содержимого. Мы склонны полагать.1. но с другой стороны. Каждая улица должна на ней быть. выбор пиктограмм или загрузка картинок занимает слишком много времени.

В общем процессе дизайна вайрфреймы могут быть неожиданно эффективны и. хорошо подходят для обсуждения внутри команды. позволяющие изобразить страницы очень близко к конечному виду. Рисунок 2. когда вам срочно требуется озарение и вас не беспокоит методологическая чистота.д. хотя они могут пригодиться для получения отзывов во время начального «партизанского» исследования. навигация между экранами. как зарисовки. Там используются библиотеки визуалов. 7 .Однако они могут использоваться менее формальным способом. они остаются важным начальным этапом сложных проектов. Для создания симуляций (или симулякров. если угодно) обычно используется программа iRise. поп-апы и т. Если разработчики спрашивают. но — Hi-Fi (high fidelity — высокой точности. меняющие свой вид при наведении. как что-то должно быть сделано. ответ может быть дан в виде быстро сделанного вайрфрейма. кнопки.тестирования. хоть в последние годы о них отзывались не очень. Вайрфреймы сложно приспособить для юзабилити. который является моделью низкой точности — Lo-Fi). они. в отличие от протопипа. Так как они просты и быстро создаются. есть выпадающие списки. полнофункцональный прототип) — на сложных проектах тоже модель для тестирования концепции или процесса. Пример прототипа. Simulation (симуляция.

часто путаемый с вайрфреймом. — это средне или высоко детализированное представление конечного продукта. С помощью этой имитации можно получить много материала для улучшения юзабилити ещѐ до фактического начала разработки. Он должен позволять пользователю:  Оценить содержание и интерфейс. Прототип — это имитация взаимодействия пользователя с интерфейсом конечного продукта. Потенциал прототипов полностью раскрывается при пользовательском тестировании. С другой стороны. так как интерфейс представляется как есть. прототип — это наиболее привлекательная форма документирования дизайна. как если бы это был готовый продукт. Он может не выглядеть в точности как конечный продукт. что будет в конечном продукте. Прототипы обычно не очень подходят для документации. 8 . Пример мокапа. но определѐнно не должен быть наброском в оттенках серого.2. которое имитирует взаимодействие пользователя с интерфейсом. Рисунок 3. Взаимодействия должны быть аккуратно смоделированы и быть максимально похожими на то. Связь между интерфейсом (фронтендом) и бэкендом обычно опускают для сокращения издержек и ускорения процесса. так как понять работу интерфейса можно только в процессе взаимодействия с прототипом.  Протестировать основные способы взаимодействия. Прототип Прототип.1.

Благодаря визуальной природе мокап воспринимается легче. и их можно использовать в документации. Mockup Builder. Хороший мокап:  Представляет информационную структуру.3. Balsamiq Mockups. ВЛИЯНИЕ МОКАПОВ НА КОНЕЧНЫЙ РЕЗУЛЬТАТ Создание условных макетов (wireframe) – занятие старое.  Поощряет оценку визуальной стороны проекта. Рисунок 4. Мокапы часто путают с вайрфреймами из-за названий таких программ как Mockingbird. На рынке софта можно найти 9 . Мокапы очень хороши для получения одобрения от заинтересованных лиц. Примерно каждые три года эти три свойства вызывают очередную полемику о нужности/ненужности таких макетов. не особо почтенное и технологически простое. и при этом создаѐтся быстрее прототипа. Очень часто мокап это черновик дизайна или даже фактический дизайн-макет. соответствующие этапам разработки прототипа. Они хороши для сбора отзывов. как именно их правильно делать [5]. mock-up) — это средне или высоко детализированное статичное представление дизайна.1. чем низко детализированные артефакты. не вовлечѐнных в разработку. 2. визуализирует контент и демонстрирует базовую функциональность в статике. о том. Мокап Мокап (Mockup. Рынок инструментов проектирования и прототипирования интерфейсов содержит сегменты. Путь от скетча к готовому продукту [4].

ориентированный на пользователя  Эргономика 2. Проектирование юзабилити – прикладное направление в сфере человеко компьютерного взаимодействия. как правило. Начало складываться в начале 90-х годов. занимающееся удобством использования (эргономикой) компьютерных интерфейсов. Улучшение продукта (вебсайта) по бизнес-показателям составляет от 135% (2003 г. с которым пользователь может использовать некоторый инструмент для достижения определенных целей. Бизнес-показатели:  Процент конверсии посетителей (продажи или выявление потенциальных потребителей).1. 10 .много инструментов для создания прототипов. Юзабилити (usability) – степень удобства.). определяется через ряд качественных показателей:  Легкость изучения  Эффективность  Легкость запоминания  Количество и серьезность ошибок и легкость их исправления  Субъективная удовлетворенность  Синонимы и смежные сферы  Дружественность к пользователю  Дизайн. В первой части работы были приведенны примеры таких программ.) до 83% (2008 г. они были проанализированы по критериям:  Визуальная точность прототипов  Интерактивность прототипов  Возможность прототипирования различных типов приложений  Скорость создания прототипов  Простота и удобство работы  Поддерживаемые платформы  Уникальные и интересные возможности Основное свое влияние мокапы имеют на юзабилити сайтов. Юзабилити интерфейса. Юзабилити Средние рекомендуемые затраты на юзабилити – около 10% от бюджета проекта (для более крупных проектов – несколько ниже).

гораздо больше среднего пользователя. а не согласно принципу «раньше и чаще». количество пользователей.тестирование.  Экспертное оценивание o Эвристический анализ Юзабилити-специалисты проверяют рассматриваемый интерфейс на предмет его соответствия общепринятым «эвристическим» принципам проектирования. 3. время необходимое на выполнение ключевых задач). Отношение людей к юзабилити сайта по стадиям: 1.  Производительность пользователя (например. Наиболее целесообразен для доработки существующего продукта или при автоматизации бизнес-процессов. Поэтому опора на интуицию разработчика при попытке представить поведение пользователя почти всегда ошибочна. В ходе 11 . Главный метод – юзабилити. перешедших по ссылке на страницу с важной информацией). даже небольшие усилия могут приводить к существенному улучшению разрабатываемых продуктов. как пользователь работает в своей привычной обстановке. самый простой из методов – смотреть. а не получать данные для отчетов и презентаций. которое применяется ближе к концу процесса разработки. Некоторые группы в компании осознают важность проектирования юзабилити и прилагают усилия по его внедрению и применению.  Юзабилити-тестирование Включает в себя технику «думание вслух»  Наблюдение за пользователем Фактически.  Использование ключевых фич (например. когда интерфейс уже как минимум частично реализован. На этой стадии проектировщики полагаются на собственную интуицию при разработке интерфейсов.2. Методы исследования юзабилити: Предназначение любых методов исследования юзабилити – определять направления улучшения [интерфейса]. 4. Отрывочное проектирование юзабилити. 2. Выделенный юзабилити. Враждебность к юзабилити. 2. Однако члены команды разработчиков заведомо знают о системе.бюджет. которую они создают. Параметры посещаемости. Юзабилити от разработчиков. Тем не менее. Однако меры по улучшению юзабилити не планируются заранее и под них не выделяется конкретный бюджет.

без значительной потери эффективности:  Некоторое упрощение понятия юзабилити (отказ от исследования легкости изучения и легкости запоминания)  Отказ от сбора количественных данных (который требует значительно более высокой трудоемкости)  Снижение стоимости оборудования и уменьшение оплаты времени респондентов 12 . – человеческое поведение не очень хорошо описывается цифрами.каждого применения метода рекомендуется использовать от трех до пяти экспертов. в ходе которого участники. однако с середины 90-х годов были предложены методы. выполняют типичные для пользователей задачи путем взаимодействия с интерфейсом системы.   Протоколирование и отзывы пользователей o Самостоятельное o Автоматическое Количественные методы o Измерение юзабилити  процент успешных выполнений задания  время. работающих независимо друг от друга. Юзабилити-тестирование заключается в эксперименте. а смотреть. o Опросы и интервью Чаще используются для оценки субъективных параметров – например. максимально приближенные к реальным пользователям. что говорит пользователь. что он делает. Изначально проведение юзабилити-тестирования являлось дорогим мероприятием. затраченное на выполнение  количество допускаемых ошибок  субъективная оценка удовлетворения от работы Как правило. существенно его удешевляющие.  Непрямые методы ПОМНИ! Нужно не слушать. o Фокус-группы Группа из 6-9 пользователей под руководством модератора в течение около 2 часов обсуждает свои потребности либо существующий интерфейс. применение сложных количественных методов при исследовании юзабилити не оправдано. удовлетворения от работы.

Но мы. Рисунок 5. 13 . Сегодня можно с уверенностью сказать. и конечный пользователь просто не будет ими пользоваться. или иметь неправильный размер. десктопного приложения или его веб.2. интуитивным и человечным [6]. позиций элементов – это самая главная задача при реализации продуктов. как же этот продукт реализовать. Посмотрим на часовой механизм и обратим внимание на самые маленькие детали. и поэтому дизайнеры вкладывают в дизайн приложений и в разработку приложений множество интересных идей и креативных подходов для того. то часы будут идти неправильно. Ни для кого не секрет. Все выглядит идеально. а возможно и цвет. положение. что стандартом де-факто уже является наличие мобильной версии. Дизайн. понятным.версии для портативного устройства с малым экраном. какого они цвета. безусловно. Если какая-то делать будет отсутствовать по непонятной нам причине. Из какого материала они сделаны. Этот же принцип применим и к любым программным и интерфейсам. чтобы сделать интерфейс простым.3. великолепные формы. что нужно для этого сделать. цветовых решений. где расположены. играет огромное значение для того. какого они размера? Все это. Ошибка при создании готового решения Сегодня технологии дизайна и разработки современных интерфейсов развиваются стремительно быстро. замечательно. Наступает момент. в определенный момент понимаем. что это только пока что на бумаге. нам как дизайнерам это все нравится. как будет в целом работать часовой механизм. когда мы начинаем думать о том. Сегодняшние пользователи требуют от приложений все больше и больше. что точная реализация всех деталей.

Это не секрет. Мы описали все размеры. что любой дизайн должен иметь техническое задание и спецификацию. Спецификации. Но мы с вами очень добросовестные дизайнеры. Окружение. это то. 14 . все цвета. При этом. в чем важность этого процесса и насколько этот процесс может помочь в будущем при реализации продукта. ничего творческого. большинство дизайнеров не понимают. Первый закон. что процесс создания технических заданий очень трудоемкий и нудный. Исходные файлы. который мы усваиваем. дизайнеры его попросту ненавидят. Рисунок 7. Все определено и все на своем месте. В этот момент наступает знакомство с волшебным миром разработчиков. все радиусы. в нем нет ничего интересного. поставили все спецификации.Рисунок 6. Рисунок 8.

Рисунок 10. что дизайнер выполнил качественно свою работу. исправим дизайн. который будет полностью соответствует нашему дизайну. что сейчас мы наймем самых лучших разработчиков. Этап разработки. функциональность полностью соответствует техническому заданию. HTML / CSS. совсем чуть-чуть». Всего-то мы откроем несколько задач. и они все исправят». руководитель проекта уверяет. 15 .Даже более того. Другими словами создаем рай для разработчика. и мы. и все будет работать просто великолепно. добавят сервисы. они подключат современные фреймворки. На этом этапе работы. нумеруем и именуем их. Тем более. который создаст статический код без функциональности. в основном. Он откроет макет и испытает восторг и радость от того. Через несколько недель момент запуска продукта. и думают: «Ну. наймем пару программистов. все работает. мягко сказать. разочарованы: «Как же так? Почему дизайн так выглядит?» На что менеджер проекта вас уверяет: «Вы знаете. все дизайнеры остаются счастливыми и удовлетворенными. Они видят верстку макета. все. в недоумении. Рисунок 9. Затем макет попадает к верстальщику или к фронт-энд разработчику. мы переносим этот дизайн в PhotoShop или любой другой удобный формат. осталось совсем немного. раскладываем все слои по полочкам. модули.

Рисунок 12. но не совсем. продукт становится похожим на то. Сложение нашего мозга. Рисунок 13. Реализованный продукт не соответствует дизайну. а для кого-то нет?  Почему дизайн важен больше чем его техническая реализация? Надо посмотреть на устройство нашего сложного мозга. что мы сделали. Проходит еще какое-то время. Сравнение дизайна и реализации.Рисунок 11. а другие люди нет?  Почему для кого-то важен правильный цвет элемента. Чтобы ответить на вопросы:  Почему одни люди уделяют внимание деталям. Результат. 16 .

которые мы только можем представить. И в тот момент. люди технического склада ума — инженеры. так сказать в финальной его стадии. Лучше 17 . музыканты. Рисунок 14. и совершенно игнорировать. то для программиста совершенно не важна толщина рамки на кнопке или наличие анимации при наведении на объект. эти две дисциплины далее никак не пересекаются в процессе разработки. создают креативные используют больше всего именно правое полушарие.Не секрет. В то время разработчики. на финишной прямой? Дизайнеры подготовили техническое задание для всего интерфейса и с удовольствием отдают его разработчиками. Что происходит в финальной фазе разработки продукта. Связь дизайна и разработки. Когда они работают. дизайнеры. разработчики − все имеют более развитое левое полушарие. когда для дизайнера совершенно не важно отличие класса от объекта или особенности рекурсивной функции. Например. В то время как художники. мечтатели и все люди. алгоритмы. И что самое интересное. где цвет ссылок сливается с цветом основного текста. что левое полушарие мозга отвечает за логику. видеть и акцентировать внимание на определенных деталях. они в основном используют все свойства левого полушария. В большинстве случаем. Это устройство нашего мозга. конструкторы. воспринимает анимацию. мечты – исходят из правой части мозга. начинают работать над реализацией интерфейса. не смыкая глаз.4. инженер разработчик и дизайнер. 2. музыку. анализ фактов. программисты. Распространенные ошибки юзабилити Цвет ссылок Очень часто мы посещаем страницы. работая над одним проектом могут попросту разговаривать на непонятном друг другу языке. дизайн. Это одна из самых глупых ошибок. числа. не понимать или не придавать значение чему то другому. В этом всем нет ничего личного. пишут стихи. Все наши идеи. В то время как правое полушарие мозга отвечает за визуальные образы. которые рисуют.

Они помогаю пользователям узнать. 18 .уже посетить страницу с синими по дефолту ссылками. предпочтение нужно отдать именно последнему фактору. читают содержание и уходят. Для веб дизайна не так важно. какие чувства вызывает тот или иной шрифт у посетителя. пока курсор не изменится на указатель. разбивая текст на мелкие блоки. когда речь идет о веб-дизайне. Конечно. как сочетаются шрифты . Люди приходят. Иногда путем изменения элементарных вещей. где находится элемент навигации. это еще не означает что это большие красивые заголовки и текстовые блоки. ни длительная загрузка сайта. Пользователи должны видеть. но. умение применить эти моменты на практике приветствуется. и ждать. является типографика красивой или нет — куда важнее читабельность текста (лучше. иногда в силу дизайнерских соображений. но не обязательно). Ни флэш. Основные особенности двух последних тенденций в мире веб-дизайна — минимализма и плоского дизайна — акцент на содержании ( в отличие от дизайнов с использование фоновых изображений. мы можем значительно улучшить читабельность и дизайн сайта в целом. цвет ссылки не может сильно отличаться от цвета текста. Главная причина такой популярности минимализма и flat-дизайна — простота и работоспособность — порой даже не верится. добавить к якорю некоторые эффекты. Конечно. выбирая между эстетикой и функциональностью. Вы просто не имеете права заставлять их искать ссылки путем наведения курсора мыши на слова. либо выбрав другой шрифт. Но в таком случае ссылку все равно так или иначе нужно подчеркнуть. в каких-то других сферах графического дизайна. не так уж и важно. ни javascript. совместить эти стороны). ни сложная графика — ничто их не отвлекает от текстового контента сайта. либо выделить нижнюю границу пунктирной линией. что сайт со стольо простым дизайном может быть на столько успешным. например изменяя кегель. Плохая типографика Когда речь идет о красивой типографике. конечно. Когда мы говорим о юзабилити. в которой цвет ссылок о основного контента одинаковый. более важными являются другие моменты. Такие моменты помогут посетителем дать более четкое представление о вашем сайте. ключевым фактором является читабельность. но все же. Посещенные ссылки также необходимо отделять. но она в любом случае должна работать. Это совершенно понятно. чем ту. на какие страницы они уже заходили. Типографика не обязательно должна привлекать визуально (желательно. Возможно. и где они могут кликнуть.

или в связи с поиском информации. очень важно не забывать настраивать дизайн кнопок под маленький экран — они должны быть больше. почему дизайн. на сколько важно сделать контент читабельным. заходят на Википедию или переходят на сайт компании для получения информации о товарах или услуги — цель есть всегда. Происходит это ради развлечения общения с близкими. от которых эта цена может зависеть. если поиграть в игры — пусть играют в игры. Понимаю. Делают они это с помощью Google. какая цель у аудитории вашего сайта.агентства не выкладывают информацию о стоимости своих услуг — существует много нюансов. заходя на сайт парикмахерской. Если хотите создать сайт для себя. сохраните страничку в автономном режиме и просматривайте со своего компьютера. тем сложнее человеку нажать на нее. Отсутствие ответов на вопросы Пользователи заходят на сайт с определенной целью. если он совершенно не читается. что ищем.очень неудобно. что он является бесполезным и для вас. у них есть конкретная цель. но в таком случае забываете о юзабилити (не говоря уже о читаемости). а не для себя. чтобы ссылки были видны. А у этой аудитории есть свои потребности. чтобы скачать темы для блога — нужно направить их в раздел загрузки.На данный момент вы должны понять.сайт для аудитории. когда дизайн становится адаптивным. если хотят узнать стоимость услуг — создайте соответствующий раздел. Но не могу понять. Очень важно помнить. Вы же делаете сайт для посетителей. чтобы текст выглядел более красивым. Важно убедиться. Очень важным является узнать. почему. 19 . Чем меньше площадь ссылки. Если они приходят. даже слишком красивый шрифт не спасет ваш текст. Вы можете уменьшить шрифт. и для посетителей. что в большинстве случаев посетители находятся на сайте в поисках информации. друзьями или другими членами семьи. Маленькие размеры кликабельных областей Маленький размер кликабельной области . Очень часто мы заходим на сайт. В любом случае. Выполняйте их. Веб. Согласитесь. Или нету возможности получить информацию о стоимости мойки машины. Сейчас. чтобы получить ответ на свой вопрос — но не всегда мы получаем. я не могу получить информацию о стоимости стрижки. С какой целью тогда существует сайт? Такое ощущение.

Прежде.популярная игра на IOS. Хорошим примером является Fruit Ninja. Это не означает. люди посещают сайты с определенной целью.агентства. Как мы уже говорили ранее. продаете или производите. Но в случае. и вы их потеряете навсегда. чем мы ожидали. Просмотр продуктов. адрес дома и размер обуви. как вы прошли демо-версию. Хотите избежать спама? Используйте контактную форму. Отсутствие поиска Многие пользователи приходят на сайт. но и для 20 . но все они требуют предварительной регистрации. для которой выходит демо-версия. например. что половина посетителей сайта в первую очередь ищут форму поиска — это намного больший процент. то веб. вы обязательно захотите перейти на более сложный уровень. функция поиска является обязательной. Если их целью является связь с вами. Запрос регистрации Нужно предоставить пользователя возможность получить информацию о функциях или программном обеспечении (демо-версия). не попробовав ее? Конечно. Только эту информацию и больше ничего. прежде чем просить их зарегистрироваться или заплатить. напишите электронную почту. чтобы получить конкретную информацию. создаете сайт для дизайн. Не имеет значение. которые вы создаете. либо до контактной информации. Если вы не хотите давать информацию о личных данных. Очень часто мы видим отличные проекты. В этом случае главным является понимание. если речь идет о блоге или другом виде сайта с множеством контента.Отсутствие контактной информации Иногда нереально добраться до сервиса пользовательского интерфейса. чем решить. чем получить возможность пользоваться приложением. нужно это ему или нет. не доступную для ботов. важно дать ему возможность увидеть приложение или продукт в действии. После того. Исследования показывают. Если вы. Нету причин не показывать контактную информацию. Прежде. Смог бы я раньше купить эту игру. на сколько важна на сайте функция поиска. Поделитесь ссылками на Twitter или Facebook — все что угодно. контактной информации вполне хватит. И именно ее многие пользователи будут искать в самом начале. не должен запрашивать у пользователей информацию для регистрации. нет.сайт полностью бесполезен для него. если способов для связи нету. Это совет не только для дизайнеров. у пользователя не всегда может появится желание дать вам номер телефона. что на каждом сайте должно быть такое поле. каким образом вы обеспечили пользователям возможность связи с вами. Иначе они могут почувствовать себя обманутыми.

нужно убедиться.и они непременно захотят купить его. 21 . растут сметы. на этом он сайте находится. Если вы уверены в своем продукте.страница имеет белый фон и навигацию в шапке. «скетчами». а еще чуть ранее — пожелавший изготовить бронзовый топор шел самолично копать руду. что совмещают в своей работе как минимум две-три разные специализации. что они не отвлекают от основного — текста.производителей. Но теперь ИТ. У пользователей будет возникать вопрос. называя их «эскизами». Использование систем сеток поможет в этом. должность. Регистрационные формы Сделайте форму регистрации как можно короче. Просите только самую важную информацию — логин. Теперь Вам больше не придется запоминать логин и длинный пароль. 21-й век стучится в черепные коробки менеджеров. который на самом деле не нужен. прототипы дизайнеры делали себе сами. сложные сервисы. «набросками» и т. На смену былым сайтам идут реально работающие. Примерно так же сто лет назад автомобилист был водителем и механиком в одном лице. Если вы иллюстрируете текст изображениями. пароль. или уже перешел на другой. на которых текст в двух столбцах разбивается изображением. Неправильное использование изображений Основное правило дизайна — не использовать элемент. ссылок типографии. предлагайте пользователем вначале опробовать . 3. Аналогичный принцип сохраняется и для цвета фона. При этом они даже как-то не представляли. что говорит о взрослении отрасли. вы никогда не получите реальную информацию.п. Сохраняйте стиль дизайна относительно всего сайта. Меня в таком случае всегда интересует вопрос — дойдя до изображения двигаться вниз или переходить в другой столбец. Непоследовательность дизайна Когда веб. электронный адрес. что именно предлагает компания? В лучшем случае вы получите поддельную информацию. И это — хорошо. если я даже не знаю. не делайте страницу «About» темной с навигацией в футере. Но если пользователь не уверен. ПРИМЕРЫ И ПОДХОДЫ К СОЗДАНИЮ МОКАПОВ На заре строения сайтов. После регистрации можете спросить у посетителя дополнительные данные — но только уже после тест-драйва продукта. Зачем мне вводить адрес. Это хорошая идея и она делает процесс регистрации намного проще и быстрее. Ненавижу сайты. нужен ли ему ваш продукт.специализации выкристаллизовались. имя. усложняется структура рабочих групп. Сегодня можно создавать учетные записи с помощью Twitter или Facebook API логина.

всегда ли следует отделять процессы создания UX и графики и отдавать их на откуп разным людям? В общих чертах с этим всѐ просто: если у визуального дизайнера достаточно способностей. и это многократно доказано. тем настойчивее возникает вопрос о разделении труда. которая лучше знает. не касающееся программирования — его дизайнерская епархия. Раньше можно было готовить всѐ. Рассмотрим два типичных крайних варианта. а теперь на «кухне» появилась еще одна хозяйка. а задача дизайнера отныне — довести их до кондиции и красиво подать. чтобы заниматься UX. но с уклоном в ИТ. с точки зрения UX простейший как амѐба: веб.дизайнерское онлайн. Зачастую с этой уверенностью он и идет дальше по профессии. как готовить полуфабрикаты. Вариант взрослый: большое и сложное клиентское приложение. WPF проект. что на беседы с проектировщиками у них просто нет времени.Но почему дизайнерам не нравится это разделение труда? — Да очень просто: из-за значительной потери контроля над процессом создания продукта. Да еще эти чертовы «проектировщики взаимодействий» трубят на всех углах. например. Это специалисты из той же отрасли. Могут ли в одном человеке полноценно сочетаться таланты проектировщика взаимодействий (дальше для краткости я буду писать «UX») и графического дизайнера? Не всегда. и группа UX в плотном. чем графическое оформление. и с UX справляется легко. но могут. что их работа важнее. где дизайнер общается с заказчиком тет-а-тет и пребывает в полной уверенности. Поэтому за адекватность постановки задач отвечают директоры сервисов. естественно. Остается вопрос. и все с ними соглашаются! Разные ли это профессии — вопрос не стоит. что все. опыта и времени. 1.портфолио. находящийся в разработке два-три года и более до первого релиза. 2. какие задачи и как должен решать продукт. Но чем сложнее работа. Проект. особенно. Обычно стейкхолдеры на таких проектах — персоны столь важные. демонстрирующее во всей красе разницу между проектированием взаимодействий и визуальным дизайном. но в начале работы окончательный вид приложения представляют смутно. если проект инновационный. что и стейкхолдеры. Они разные. если за плечами нет дизайнерского прошлого). не имеющий существующих аналогов. Примерно так же. как некоторые пианисты могут сносно играть на гитаре. Тут он сам себе — заказчик и исполнитель. разбивается на короткие отрезки — спринты (обычно длиной в месяц-полтора). Вариант идеальный для дизайнера визуалов. ежедневном взаимодействии с директорами 22 . выполняемых командой из 2-3 человек. что угодно. лучше всѐ отдать ему (спецы по UX с визуалами справиться не могут. Они понимают. Карьера обычно начинается с этого и других несложных сайтов.

Но при этом нужно быть готовым к тому. Как правило. С другой стороны. Одним из стандартных подходов к проектированию сайтов является. создает сценарий управления вниманием и эмоциями пользователя. т.к. разработка технического задания 3. если они не ломают общей концепции сценариев взаимодействий. Можно сказать. какие методы и приемы построения интерфейса будут использоваться. насколько будет уместна та или иная нота в законченном произведении. это подобно еще не написанной симфонии — никто. UX-дизайнеры имеют своего лидера. проектирование взаимодействий — более трудная и более важная часть работы над продуктом. [8]. При этом. кроме автора не может знать. но в реале. На основе работы с директорами сервисов он определяет. он может предлагать свои UX-решения и внедрять их. подход в семь этапов [7]. а расходует всю свою творческую энергию кумулятивно. есть только идея и какие-то первоначальные блоки. конечно. вырабатывает некое видение взаимодействия пользователя с будущим продуктом. А визуальный дизайнер вырабатывает свое видение управления вниманием и эмоциями пользователя в рамках определенной визуальной идентификации. т. Группа UX может состоять из 2-3 и более UX-дизайнеров и дизайнера визуалов. [11]: 1. и тому. и если дизайнер хочет контролировать процесс создания интерфейсов.сервисов начинает от спринта к спринту постепенно формировать модели работы пользователей с разными модулями и основные принципы работы с продуктом. Большинство проектов находится где-то посередине между этими крайностями. вѐрстка и программирование 5. наполнение информацией 23 . И дизайнер не пляшет от самой печки вместе с бизнес. что в один прекрасный день тебя отодвинут от создания визуала и наблюдать за ним придется издали. [10]. виднее — доверить UX визуальному дизайнеру или нет. который фактически является бизнесаналитиком. никто не вмешивается в работу дизайнера по визуализации продукта.аналитиком. он должен мигрировать в сторону UX. кто руководит проектом. конечно.е. а какие — нет. тратя всего несколько часов в неделю на обсуждения уже созданных моделей взаимодействия и пользуясь видеороликами с записями UX- последовательностей. дизайн 4. которые постепенно «обрастают мясом». за документированного «сценария» нет. постановка задачи 2. и ему приходится закапываться в отраслевую специфику довольно глубоко. [9].

При изготовлении более качественного и инновационного продукта ставится акцент на практичности и юзабилити. тестирование сайта 7. Как только техническое задание попадает к разработчику. шрифты и т. размеры. д. но есть и другой подход. но визуально оно отличается и не 24 . Затем этот вайрфрейм передается дизайнеру.6. он приступает к написанию функционального кода. После тестирования прототипа на фокус группах и утверждения его всеми отделами. стилей и точных размеров. но когда дело доходит до непосредственно программирования визуальной части интерфейса. Он может быть создан на доске. цвета. Концептуальный подход. который прорабатывает все нюансы интерфейса и сценарии пользователя. салфетке или в любой графической программе. на 100% соответствует техническому заданию. он только расставляет все необходимые элементы интерфейса на экране без оформления. Приложение работает. В нем четко должны быть указаны все необходимые отступы. Рисунок 16. создается техническое задание и спецификация для каждого экрана и сценария. Данный подход находит своѐ применение в большинстве случаев при разработке софта на заказ. например Adobe. а не на сроки и ресурсы. стили. Стандартные этапы создания сайтов. Все начинается с концептуальной идеи и вайрфрейма. Microsoft Expression и т. и этому может быть посвящена целая отдельная статья. На этом этапе может использоваться совершенно любой графический пакет. д. продвижение и развитие Рисунок 15. Вообще техническому заданию для дизайнера в нашей студии отводится очень серьезное внимание. листке бумаги.

что это кнопка. Чрезмерные украшения могут отвлекать пользователей и даже снизить использование функций приложения. веб. 3. как часто используются компьютеры и смартфоны. чтобы полировать интерфейс на то. чтобы показать пользователям реализм.соответствует дизайну. чтобы понять. д. Плоский дизайн становится убедительным и функциональным. Эпоха «Введение» закончилась. То есть. 25 . который был задуман дизайнером. Это проблема. что элементы дизайна были упрощены. Из-за того.сайты ускорили время загрузки. Плоский дизайн движется вперед. а разработчики могут писать более чистый. чтобы расставлять все необходимые стили. Это уже не то время. а не создавать пародии на предметы реального мира. где приложение принимает тот вид. даже без них приложение может быть работоспособным. которую решает плоский дизайн. Он предназначен для того. Он избавляется от украшений и сосредотачивается на функциональности [12]. Юзабилити плоского дизайна Появление смартфонов стало призывом к плоскому дизайну. После этого код попадает в отдел интеграции. отступы и т. пришло время «двигаться вперед».1. когда люди нуждались в выпуклых кнопках просто. Большое количество людей в наши дни знают. так как он заостряет взгляд пользователей на информации вместо отвлекающих украшений. С маленькими экранами передача большего количества информации вытесняет эстетику интерфейса. на этом этапе разработчик совершенно не тратит время на то. разборчивый и адаптированный к дизайну код. Украшения избыточны.

Максимальное юзабилити исключает возможность сделать большое количество функциональных элементов. Единственной лазейкой остаѐтся человеческая привычка. юзабилити и функционал. в техники создания мокапов были внесены изменения. как впрочем и всего сайта будет оставатся делом требующим умственного вмешательства. Для выхода из проблемы морального устаревания. не оставляет места для дизайна. Это имеет место быть из-за разногласия трѐх основопологающих факторов: дизайн. а надо подгонять под каждого пользователя. что юзабилити не надо создавать. использования людьми морально устаревших технологий вынуждает разработчиков тормозить развитие софта. так как это противоречит закону о семи элементах любого меню. В результате делаем вывод. потому как в результате клиент желает получить оптимальные для него показатели юзабилити. Создание максимально функционального сайта. То есть мы знаем на чем пользователь просматривает страницу. мокап ещѐ изменяется в частых случаях. также как исключает возможность отходить от привычных приѐмов в дизайне. В результате. Бизнес мышление и желание сделать универсальный продукт вытисняют у разработчиков идей создать максимально удобный продукт. и может быть навязана. 26 .ЗАКЛЮЧЕНИЕ В результате изучения примеров и подходов к созданию мокапов можно сделать вывод. разработчики пытаются экспериментировать и постоянно улучшать свои продукты. То есть создавая мокап для сайта. и понижает юзабилити. кроссплатформенный продукт должен включать мокапы для всех желаемых платформ. Создание мокапа. что стандартная техника по созданию мокапов подразумевает постоянные изменения. значительно падает функционал и юзабилити. так как универсальных решении в проектировании не существует. и используем приѐмы юзабилити такие же как в операционной системе. Эти три показателя являются взаимоисключающими. Эти изменения носят название кроссплатформенное проектирование. но значительно улучшает юзабилити. что увеличивает объѐм работы. до тех пор пока проект не будет закончен. То есть после создания дизайна и программирования. При попытке поставить акцент на дизайн. С другой стороны. и отсутствие одного из них приводит к провалу проекта. которая разница от человека к человеку. дизайна и функционала. разработчик не может отходить от привычек пользователей или аппаратных возможностей старой техники. они лишают человека возможности человека привыкнуть к старой и неудобной технологии. Но так как для поиска максимального КПД от работы.

27 .

7.01.microsoft. макета [online]. [Цитировал 11. ГОЛОВАЧ В.01. [online]. Интеграция дизайна.pdf>.ru/2013/04/26/11-byudzhetnyx-instumentov-dizajnera-dlya-sozdaniyainterfejsov-i-maketov/> 2. Плоский дизайн [online].webberry.ua/etapu-razrobku-sayta.БИБЛИОГРАФИЯ 1.2014]. Доступно по адресу: <http://virosa. Доступно по адресу: <http://lifehacker. Часть [Цитировал 7.01. СТУПАК О.2014]. [Цитировал 11. [Цитировал 11.ru/view_post. Каждый пиксель имеет значение.01. 9. [online]. 12.ru/blog/lib/wireframing/>. Этапы разработки. ГАЙФУТДИНОВ Г.html>. Доступно по адресу: <http://msdn. [Цитировал 11. Этапы создания сайта. [Цитировал 11.2014].01.01. [Цитировал 11.2014].01. [Цитировал 11. Доступно по адресу: <http://guimachine. [Цитировал 11. [online].01. 5.com.ru/wireframes-prototypes- mockups/>. сайта. 6.net/ru/usefull/1294334817>.aklychin.ru/downloads/prototyping_tools_review. Создаем 11.2014]. Доступно по адресу: <http://www.2014]. Доступно <http://webcodeblog. Доступно по адресу: <http://habrahabr.01.01. [online].01.01. ГРИГОРЬЕВ А. Вайрфреймы. О бедном мокапе замолвите слово 2013. [online]. 3. Доступно по адресу: <http://projectorat.2014].2014].2014]. 8. Доступно по адресу: <http://webarty.2014]. прототипы и мокапы. Часть 1.2014]. Как создается сайт. [Цитировал 11. 4.connectdesign.2014]. 28 .ru/web-design/>.ru/post/170549/>. Доступно по адресу: <http://usethics.com/ruru/dn169569. ГАВРИЛОВ Е. Обзор и анализ инструментов проектирования и прототипирования интерфейсов.php?id=108>.ru/rasshirennyjj-vzglyad-na-ploskijj-dizajjn-flat-design/>. [online]. навигационное Доступно меню по адресу: по адресу: <http://www. Доступно по адресу: <http://www.ru/proposition/site_creator/kak-sozdaetsya-sayt/>.aspx>. [Цитировал 11. Этапы создания (продолжение). [online]. Основные этапы разработки сайтов. 11 бюджетных инструментов дизайнера для создания интерфейсов и макетов [online]. 11. [online]. [Цитировал 11. 10. (2012) Наука и искусство условного макетирования [online].