Проектирование веб интерфейсов: Основы проектирования веб-интерфейсов в Axure RP Pro / Хабр

Основы проектирования веб-интерфейсов в Axure RP Pro / Хабр

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

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

Средств для визуального проектирования становится все больше. Одни пользуются Adobe InDesign, другим нравится Visio, третьи довольствуются OpenOffice Draw. Но все больше поклонников появляется у довольно тяжелой и функциональной программы Axure RP Pro.

1. Карта сайта (Sitemap)

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

Кнопки в панели предназначены для быстрого доступа к основным функциям:

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

2. Панель виджетов

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

В область можно подгружать либо все элементы из всех библиотек одновременно (для этого нужно выбрать All libraries), либо только ту библиотеку элементов, которая нужна в настоящий момент. Кстати, библиотеки элементов можно создавать самостоятельно, но об этом речь пойдет чуть ниже.

Чтобы поместить элемент на страницу, используется метод Drag and Drop (элемент необходимо выделить и, не отпуская кнопку мыши, перетащить в рабочую область).

Основная библиотека, которую стоит использовать на стадии освоения программы, называется Wireframe. Ее элементы мы и будем использовать.

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

3. Панель мастеров (Masters)

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

Мастер-панели тоже могут быть многоуровневые (к примеру, футер может содержать дочерние элементы «контакты» и «счетчики»).

По умолчанию мастер-панелей нет. Чтобы завести ее и добавить на все страницы, надо выполнить последовательность:

Жмем кнопку AddMaster () → Два раза кликаем по созданной мастер-панели (в рабочей области открывается вкладка, на которой будет редактироваться содержимое мастер-панели) → Редактируем мастер-панель, добавляем на нее необходимые элементы → Правой кнопкой мыши по названию мастер-панели вызываем контекстное меню → Жмем «Add To Pages» → Выбираем необходимые страницы (если мастер-панель должна выводиться на всех страницах, можно воспользоваться кнопкой «Check All») → Выбираем позиционирование панели (в том случае, если будет выбрано Place in background, мастер-панель сохранит то же самое расположение, в котором она выполнена. Если выбрать Specify Location и задать левый и верхний отступы, мастер-панель займет указанное положение на страницах) → Жмем «ОK» и наслаждаемся размещенной мастер-панелью.

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

4. Рабочая область

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

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

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

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

Итак, приступаем.

Для начала делаем скриншот исходника:

Здесь можно посмотреть на исходник в нормальном разрешении.

Отмеряем по верхней линейке 1000px.

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

Убираем рамку у прямоугольника.

Выбираем светло-серую заливку.

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

Накидываем и оформляем блок новостей, используя элементы Text Panel для текста/ссылок и Rectangle для подложки «новость часа». Здесь сразу получаем несколько тонкостей.

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

Во-вторых, чтобы текстовые блоки имели равномерные вертикальные отступы, надо их выделить и выровнять по вертикали:

В-третьих, чтобы сделать прерывистое подчеркивание у ссылки-переключалки города, надо под надписью разместить горизонтальную линию (элемент Horizontal Line) и выбрать для нее тип подчеркивания.

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

Новости в общем виде готовы — можно переходить к строке поиска и к рекламному месту «Яндекс в вашем телефоне».

Накидываем ссылки над строкой поиска (Hyperlink) и размещаем саму строку поиска с кнопкой (Text Field + Button).

Ссылки сразу переводим в размер 12 и стараемся подогнать ширину элемента по ширине гиперссылки, чтобы команда Distribute Horizontally, выравнивающая горизонтальные отступы группы элементов, сработала корректно. Конечно, идеально не получится и придется немного подгонять их руками, но альтернативы нет (по крайней мере, я не нашел).

Не забываем про «например» (элемент Text) и «расширенный поиск» (Hyperlink).

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

Справа подложка под формой у Яндекса заканчивается нестандартно — на то он и дизайн. Фанаты могут вырезать из скриншота окончание подложки, разместить в рабочем поле элемент Image и подменить ее на нужную. Мы сделаем это в самом конце, потому что сейчас просто лень и есть более важные задачи. Например, поставить логотип.

Как раз сейчас мы и разберем подмену картинок. Это достаточно просто — надо вытащить в рабочую область элемент Image и, не изменяя его размеры, два раза кликнуть по нему. Откроется диалоговое окно, в котором мы должны выбрать файл изображения. После того, как мы нашли нужную картинку и нажали «OK», Axure задаст вопрос:

Если отказаться — выбранная картинка будет подогнана под размер элемента Image. Если согласиться — картинка будет вставлена в том размере, в котором она существует. Как правило, приходится соглашаться.

Чтобы прототип смотрелся более живо, изображение с баннером я своровал со скриншота. Но, в принципе, можно для этих целей использовать элемент Placeholder — ничего в этом страшного нет.

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

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

Да, кстати, я не имею никакого отношения к этой программе и к компании, разработавшей ее. Этот инструмент был выбран исключительно из-за того, что из всего набора софта, который я перепробовал для проектирования, Axure понравилась больше всего. Я не исключаю того, что вы будете пользоваться другим софтом. Например:

1. Обзор средств визуального проектирования.

2. 18 Wireframing, Mockup And Prototyping Tools To Plan Designs.

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

50 бесплатных ресурсов для создания веб-интерфейсов

Для удобства подборка разбита на восемь следующих категорий:

1. Фото и видео.
2. Иллюстрации.
3. Палитры.
4. Типографика.
5. Анимация и другие эффекты.
6. Иконки.
7. Паттерны и модели.
8. Справочные ресуры и подборки.

1.1. Coverr – фоновые видео

Coverr

Coverr – это ресурс с бесплатными фоновыми видео, придающими главной странице ощущение объёма и живости. Есть поиск и разбивка по тегам. Внизу главной страницы – шпаргалка о встраивании видео в HTML, CSS и JavaScript.

1.2. Mixkit – видеоролики и музыка

Mixkit

Потрясающие стоковые
видеоклипы, музыка и шаблоны Adobe Premiere Pro. Всё совершенно бесплатно. Внизу главной страницы Mixkit разбиение блоков по тегам.

1.2. Pexels – фото и видео

Pexels

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

1.3. Photo Creator – сборка изображений из изолированных фонов, моделей, объектов

Photo Creator

Сайт-конструктор для создания реалистичных фотографий из изолированных слоев с изображениями тысяч моделей, объектов и фонов. JPEG на Photo Creator бесплатны, PSD-файлы доступны по платной подписке.

1.4. Unscreen

Unscreen

Unscreen удаляет фон с видео и гифок.

1.5. Remove
Background

Remove Background

В Remove Background все, как и в предыдущем
инструменте, только ресурс работает со статичными изображениями. У сервиса есть платный API для получения батчей полноразмерных изображений с удаленным фоном.

1.6. Generated Photos – сгенерированные портреты

Generated Photos

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

На этих фотографиях ненастоящие люди?

1.7. Duotone

Duotone

Дуотон – представление изображения в паре цветов. Сервис Duotone конвертирует любую
фотографию в дуотон за считанные секунды. То есть можно настроить любые два цвета под палитру вашего ресурса и получить стильные вариации фотографии, как будто сделанные специально для вас.

2.1. Open
Peeps – библиотека иллюстраций

Open Peeps

Open Peeps – интересная библиотека нарисованных от руки иллюстраций.

2.2. Smash
Illustrations – конструктор иллюстраций

Smash Illustrations

Крутой конструктор иллюстраций
для построения сцен с красочными рисунками и персонажами. Smash Illustrations работает со Sketch, Figma, можно создавать изображения в формат svg и png.

2.3. Open
Doodles – набор иллюстраций

Open Doodles

Open Doodles – бесплатный набор скетч-иллюстраций и анимаций на любой случай.

2.4. Control
Illustrations – конструктор сценок

Control Illustrations

Библиотека Control Illustrations включает 108 иллюстраций с настраиваемым стилем и типами действий. Используйте
конструктор, чтобы создать сцену, которую вы ищете.

2.5. Ouch! – векторные иллюстрации

Ouch!

Проект Ouch! посвящен
бесплатным векторным иллюстрациям в разных стилях, которые можно применить в пользовательских интерфейсах.

2.6. Avataaars
Generator – генератор аватаров

Avataaars Generator

Avataaars Generator служит для создания иконок уникальных учетных записей. Не знаете, какой стиль вам нужен – понажимайте
на кнопки, пока не найдете то, что вам подходит.

2.7. Faux Code Generator – иллюстрация кода

Faux Code Generator

Часто в иллюстрациях, связанных с программированием, полезно изобразить код, но в каком-то обобщенном виде, скрыв само содержание. Faux Code Generator превращает реальный код
(GitHub Gist) в искусственный (SVG-изображение).

3.1. Parametric Color
Mixer – микшер палитры

Parametric Color Mixer

С Parametric Color Mixer можно настроить цветовую
палитру, как с помощью звукового эквалайзера.

3.2. CSS
Gradient – градиент в стилях

CSS Gradient

Помимо того, что CSS Gradient – прекрасный генератор CSS-градиентов, ресурс содержит полезный обучающий контент.

3.3. Colorsinspo – сборник цветовых палитр

Colorsinspo

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

3.4. Color Hexa – конвертер представлений цветов

Color Hexa

Бесплатный
инструмент Color Hexa предоставляет информацию о любом цвете и генерирующий
соответствующие цветовые палитры. Просто введите любое цветовое значение в поле
поиска и получите конвертированные значения в Hex, RGB, CMYK, HSL, HSV,
CIE-LAB/LUV/LCH, Hunter-Lab, XYZ и Binary.

3.5. Color
Space – библиотека цветовых схем

Color Space

Color Space предоставляет множество вариантов построения цветовых схем для вашего следующего
проекта.

3.6. Palettte
App – цветовые палитры по кривым

Palettte App

Palettte App отличается тем, что цветовой схемы можно генерировать через наложение кривых.

3.7. Colorable – проверка контрастности текста

Colorable

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

4.1. Freebiesbug – свободные шрифты

Freebiesbug (free fonts)

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

4.2. Fonts
Arena

Fonts Arena

Fonts Arena распространяет как
бесплатные, так и платные шрифты. Для облегчения поиска есть разделение на категории .

4.3. Befonts

Befonts

На Befonts можно скачать
лучшие бесплатные шрифты для личного или коммерческого использования – красивый
script type, профессиональный sans serif и многое другое.

4.5. Font Squirrel

Font Squirrel

В популярный среди верстальщиков ресурс Font Squirrel встроен
генератор цветов, распознаватель, гора бесплатных шрифтов, форум и полезное
чтиво по теме.

4.6. Fontjoy – тест сочетания шрифтов

Fontjoy

Fontjoy – сервис для проверки сочетаний шрифтов из Google Fonts.

4.7. Type
Scale – проверка читаемости шрифта

Type Scale

Если нужно проверить, удобно ли читать шрифт в заголовках и при разном масштабировании, Type Scale делает все необходимые вариации значения line-height и margins.

5.1. Генератор плавных теней

Smooth Shadow Generator

Плавными кривыми создаем необходимый
теневой рисунок, Smooth Shadow Generator на выходе дает код для
вставки на страницу.

5.2. CSSeffectsSnippets – эффекты на Vue.js

CSSeffectsSnippets

CSSeffectsSnippets – коллекция
CSS-эффектов (анимация, текст, кнопки), выполненная с помощью Vue.js.

5.3. Генератор CSS-разделителей

Separator Generator

Separator Generator – набор настраиваемых CSS-разделителей с возможностью легкого копирования кода.

5.4. Animista

Animista

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

5.5. Draggable – Drag&Drop-эффекты

Draggable

Draggable – интересная JavaScript-библиотека для реализации drag&drop-эффектов.

5.6. Block Reveal Effects – появление блоков

Block Reveal Effects

Block Reveal Effects – красивая реализация постепенного появления блоков страницы, раскрывающихся по мере ее скроллинга (по ссылке есть демо-пример).

6.1. IconStore

IconStore

IconStore – библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных
первоклассными дизайнерами.

6.2. CSS
Icons

CSS Icons

CSS Icons – опенсорсные CSS, SVG и
Figma UI иконки,
доступные в SVG Sprite, styled-components, NPM
и API.

6.3. Icon Transition Generator

Icon Transition Generator

Создайте переход между
двумя значками с помощью Icon Transition Generator и загрузите его в SVG. Загрузите сгенерированный код в Nucleo или импортируйте его сразу в свой проект.

6.4. Tilda Icons

Tilda Icons

Tilda Icons – коллекция из более чем
700 бесплатных иконок, разделенных по категориям и тематикам.

6.5. Ikonate

Ikonate

Ресурс Ikonate позволяет настроить иконку под ваши нужды и скачать ее.

6.6. Eva Icons

Eva Icons

В пакете Eva Icons 480 опенсорсных иконок на темы действий и предметов. Можно использовать в вебе, iOS и
Android.

6.7. Анимированные иконки

Animated Icons

На ресурсе с незамысловатым названием Animated Icons вы найдете 400 бесплатных
анимированных иконок.

7.1. Паттерны CSS

CSS Patterns

Библиотека CSS Patterns на чистом CSS помогает заполнить пустой фон красивыми узорами.

7.2. Get
Waves

Get Waves

Простое веб-приложение Get Waves генерирует неповторяющиеся svg-волны – можно разнообразить границу футера.

7.3. Blob
Maker

Blob Maker

Blob Maker – генератор дизайна уникальных пузырчатых SVG-форм, как на картинке выше.

7.4. Генератор полигонов

Rad Lines

Rad Lines – векторный генератор
SVG-полигонов на Vue.js.

7.5. Patterns

Patterns

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

8.1. Nucleo App

Nucleo App

Nucleo App – популярная библиотека с кучей иконок, а также мощное приложение для их сбора, настройки и экспорта.

8.2. Checklist design

Checklist design

Checklist design – коллекция лучших
практик UX и UI с пошаговым разбором того, что предпринять и как действовать.

8.3. Design System Repo

Design System Repo

Обширный и пополняемый
список ресурсов, руководств по стилю и библиотек шаблонов, которые можно
использовать для вдохновения – всё это Design System Repo.

8.4. CSSPeeper

CSSPeeper

Расширение для Google Chrome CSSPeeper позволяет выбрать объект
на любом сайте и извлечь его CSS-свойства, чтобы применить их в своем проекте.

8.5. AI Image Upscaler

AI Image Upscaler

AI Image Upscaler – инструмент, использующий мощь искусственного интеллекта для того, чтобы попытаться восстановить качество изображения с низким разрешением и увеличить его.

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

Проектирование и разработка дизайна интерфейса сайта для пользователей — разработчики web-интерфейсов

Команда AskUsers

11.01.2018 • 8 мин. читать

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

Базовые требования к веб-интерфейсу были сформулированы Якобом Нильсеном в виде 10-ти универсальных эвристик, которые не теряют своей актуальности с 1990 года, когда они были впервые опубликованы. Впоследствии этот список был доработан, расширен, формализован. Он лег в основу международного стандарта юзабилити ISO 9241-110.

5 этапов создания интерфейса

В зависимости от потребностей клиента и степени готовности проекта мы можем проектировать:

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

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

Анализ

По порядку собираем, изучаем и анализируем всю нужную для создания веб-интерфейса информацию:

1. 
   Потребности бизнеса: для чего создается проект, какие бизнес-задачи он должен решать, как будет монетизироваться в дальнейшем.

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

3. 
   Базовые характеристики и уникальные преимущества проекта на уровне идеи: почему именно этот проект может решить задачу лучше, чем конкуренты, что для этого нужно.

4. 
   Точки соприкосновения: в каком месте интересы аудитории и бизнеса пересекаются — ищем драйверы для создания оптимальных пользовательских сценариев.

Что именно мы изучаем:

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

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

Представление

1. 
   Формируем концепцию будущего проекта, продумываем и создаем пользовательские истории.

2. 
   Разрабатываем информационную архитектуру и определяемся с функционалом системы.

3. 
   Продумываем пользовательские сценарии и особенности взаимодействия пользователей с интерфейсом.

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

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

Прототипирование

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

Обычно для одного интерфейса разрабатывают несколько равноценных версий. В ходе A/B-тестирований, по результатам интервью и онлайн-опросов выбираются решения, которые в большей степени соответствуют бизнес-задачам и потребностям аудитории.

В результате нерабочие идеи отбрасываются. Остаются только те, которые прошли проверку аудиторией. Именно на этом этапе становится видно, насколько определенные во время предпроектного анализа точки соприкосновения соответствуют реальности.

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

Хорошая новость: если найти и исправить недочеты на этом этапе, то их не придется исправлять в готовом продукте, что стоит на порядок дороже.

Дизайн и разработка

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

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

Важно: Почему тестирование — это постоянный и непрерывный процесс, а не разовая акция?

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

Аналитика

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

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

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

Итоговые выводы

• Базовые принципы проектирования интерфейсов описаны в эвристиках Нильсена и в стандарте ISO 9241-110.
• 
  Проектирование осуществляется на трех уровнях: логика, функционал, графическое представление.
• 
  В процессе можно выделить 5 этапов: предпроектный анализ, представление, прототипирование, дизайн и разработка, аналитика.
• 
  Тестирование и проверка идей, теорий и решений — непрерывный процесс. Он начинается с того самого момента, когда у нас появляются первые скетчи и наброски прототипов.
• 
  Готовый интерфейс тестируется как с привлечением респондентов, так и средствами веб-аналитики на реальных пользователях. По итогам тестов формируется техзадание для его последующей доработки.

Если у вас остались вопросы по этапам проектирования и создания сайтов — задавайте их в комментариях. Мы обязательно ответим.

Закажи юзабилити-тестирование прямо сейчас

Заказать

как сделать так, чтобы UI не лишил вас прибыли — Дизайн на vc.ru

В ноябре 2018 года студия «Лайв Тайпинг» рассказывала читателям vc.ru, из чего складывается стоимость мобильного приложения. Эта статья посвящена одному из слагаемых: пользовательскому интерфейсу.

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

Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. А ещё интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Доказывать важность дизайна как магнита для пользователей удобно на примере соцсетей с миллионами пользователей. Резонансным случаем в рунете стал редизайн «Кинопоиска». 96% негативных отзывов на него говорят сами за себя: владельцы сайта, компания «Яндекс», сделала это без оглядки на мнение пользователей.

Когда плиточный дизайн — не лучшая идея

Источник: tjournal.ru

Новый дизайн фокусировал внимание пользователей на возможности смотреть фильмы платно через партнёров «Яндекса», и это решало только задачи площадки и партнёров. Но пользователи больше всего ценили сайт за рейтинги, оценки, списки фильмов, топ-250, блоги и всё, что создаётся аудиторией.

В итоге новый сайт просуществовал четыре дн

15 принципов дизайна интерфейсов, которые позволят создавать лучшие веб-сайты

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

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

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

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

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

Управление пользовательским опытом и сервисный дизайн

Не упусти свой шанс изучить все аспекты профессии СX/UX-специалиста от ведущих экспертов!

Cкидка 10% по промокоду «UXPUB»

Мы начнем с рассмотрения основ юзабилити.

1. Не заставляйте пользователя думать

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

2. Дело не в дизайне

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

Суть сайта сводится к контенту и функциональности, а не к дизайну.

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

3. Предоставляйте пользователю контроль

Дизайн должен быть в первую очередь сфокусирован на то, чтобы дать пользователю ощущение контроля над своим опытом. Когда дизайн заставляет пользователя искать, как что-то сделать или, что-то еще хуже, нарушает базовую функцию Интернета (например, нажатие кнопки «Назад» или изменение размера текста), он терпит крах.

Предоставление пользователю элемента управления также означает контроль над циклической анимацией или автоматическим воспроизведением видео. Чем больше у пользователя контроля, тем он более расслаблен и восприимчив.

4. Проектируйте для взаимодействия

Важно помнить, что в конечном итоге Интернет представляет собой интерактивную среду, и наши проекты должны учитывать это. Кнопки должны выглядеть и вести себя, как кнопки. То же самое относится и к ссылкам.

Мы также должны тщательно подумать о влиянии взаимодействий пользователей. Что произойдет, если пользователь допустит ошибку? Как адаптируется дизайн, если пользователь изменит размеры браузера или переключит устройства?

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

5. Фокусируйтесь на одном действии за раз

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

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

6. Разбейте плотный контент на куски

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

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

Самое важное правило UX-дизайна гласит: «Все разбивают большие куски информации на маленькие, чтобы быстрее обрабатывать информацию».

7. Группируйте связанные элементы

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

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

8. Создайте сильную визуальную иерархию

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

Размер, цвет и расположение играют важную роль в создании визуальной иерархии и ориентировании пользователя по странице.

9. Будьте предсказуемы

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

Мой совет: если вы хотите поэкспериментировать (и вам следует), сделайте это на сторонних проектах или на определенных веб-сайтах, где уместно исследование.

10. Используйте эстетику, чтобы вызвать у пользователей правильное настроение

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

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

Дизайн игрового автомата является хорошим примером роли эстетики в формировании пользовательского опыта.

11. Изображения должны иметь четкую цель

Область представляющая опасность – это изображения. Дизайнеры часто загружают изображения, чтобы добавить на страницу «визуальный интерес», но это ошибка.

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

12. Поддерживайте инклюзивность

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

Опасно делать предположения о нашей аудитории и ее потребностях в доступности.

13. Соответствуйте ментальной модели пользователя

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

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

14. Тестируйте и проводите итерации

Чтобы побороть наши предположения о пользователях, мы должны проводить тесты. Тестирование очень важно для процесса проектирования в целом.

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

Великолепный дизайн не формируется полностью в голове дизайнера. Вместо этого он развивается путем проведения тестирований и итераций. Поэтому наш процесс должен это отражать.

15. Приоритет производительности

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

Низкая производительность оказывает значительное влияние на конверсию и просмотры страниц.

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

Принципы проектирования интерфейса – ограничения?

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

Являются ли принципы дизайна интерфейса ограничением? Безусловно. Однако они не сдерживают творчество или инновации. Творчество и инновации случаются благодаря ограничениям, а не вопреки им.

Это урок, который мы все должны усвоить, если хотим стать лучшими дизайнерами. Работа в соответствии с такими принципами нам в этом поможет.

Обзор инструментов для прототипирования пользовательских интерфейсов — «Хакер»

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

http://balsamiq.com

Макет веб-интерфейса в браузере

Эта программа — самый известный инструмент для создания прототипов. Balsamiq доступен для всех операционных систем, и его можно интегрировать с различными системами совместной работы, включая Jira, Confluence и Google Drive. Также есть онлайн-версия Balsamiq. Лицензия для одного ПК обойдется в 79 долларов, а доступ к веб-приложению — от 12 долларов в месяц (не более трех активных проектов).

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

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

Шаблонов для мобильных платформ в Balsamiq очень мало — всего предусмотрено семь макетов и элементов для iPhone. Это макет самого iPhone и некоторые элементы, характерные для мобильной ОС: форма picker (используется в мобильных ОС для ввода времени и других параметров), экранная клавиатура, тумблер ON/OFF и другие. Впрочем, все остальные элементы, необходимые для создания макета мобильного приложения, можно взять из других разделов библиотеки. К сожалению, шаблонов для других мобильных устройств не предусмотрено. Учитывая схематичность получаемых макетов, шаблон iPhone вполне подошел бы для прототипирования интерфейса приложения для любого смартфона или планшета. Но Balsamiq не позволяет изменять соотношение сторон экрана смартфона.

Макет интерфейса приложения для iPhone

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

http://wireframesketcher.com

Шаблоны планшета выглядят неаккуратно, но с их помощью можно нарисовать интерфейс для любого устройства

WireframeSketcher Studio — возможно, самый удобный инструмент создания макетов из рассмотренных в этой статье. В нем библиотека шаблонов даже больше, чем в Balsamiq, есть макеты под все популярные мобильные ОС (iOS, Windows Phone и Android) и даже некоторые веб-фреймворки, например Bootstrap. Интерфейс этой программы, по сравнению с тем же Balsamiq Mockups, более удобен: наиболее часто используемые функции, такие как группировка элементов и вынос их на передний или задний план, выполняется кнопками на главной панели, а не из меню.

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

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

WireframeSketcher Studio доступна для Windows, Linux и OS X, а также в виде плагина для Eclipse. Бессрочная лицензия, включающая в себя один год технической поддержки, обойдется в 99 долларов.

http://www.flairbuilder.com

Интерфейс FlairBuilder аскетичен

Эта программа по функциональности во многом повторяет Balsamiq. Разработчики даже обеспечили импорт макетов из Balsamiq. В библиотеке шаблонов присутствуют элементы для веба и iPhone, но других мобильных ОС нет. Шаблон браузера называется Chrome и представляет собой не окно, как в остальных программах, а лишь верхнюю часть интерфейса браузера: адресную строку и кнопки «Вперед», «Назад», «Домой».

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

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

Программа поддерживает импорт растровых изображений и экспорт готовых макетов в PDF, HTML и растровые форматы. Для просмотра интерактивных шаблонов на сайте разработчика доступен бесплатный viewer. Цена лицензии на FlairBuilder для одного пользователя — 99 долларов.

http://www.designervista.com

Возможности создания макетов приложений под Windows в DesignerVista mockup tool кажутся безграничными

DesignerVista заточен исключительно для проектирования интерфейсов десктопных приложений под Windows. Отсюда и особенности библиотеки: в ней есть, например, огромный набор шаблонов для построения ленточного интерфейса (ribbon). Даже простой шаблон окна представлен в двух вариантах: из Windows 7 и 8.

Помимо шаблонов элементов управления, в макет можно добавлять ссылки на другие макеты, страницы этого же макета или URL. Сама ссылка может быть видимой или прозрачной. Это позволяет вставить в макет скриншот готового интерфейса и разместить на месте его кнопок ссылки на макеты будущих частей приложения. Экспорт макета возможен в PDF, HTML и растровые форматы.

Интерфейс программы стилизован под последние версии Microsoft Office. Работать с ним удобно. Единственный недостаток — нет автоматического выравнивания элементов. Например, в WireframeSketcher Studio шаблон при перетаскивании его на лист старается автоматически выровняться относительно соседних элементов. При этом отображаются линии, подсказывающие логику этого выравнивания. В DesignerVista для выравнивания используются отдельные кнопки на панели инструментов, это слегка увеличивает время создания макета.

В общем, если нужно работать только с макетами десктопных Windows-приложений, то DesignerVista — идеальное решение, полученный прототип будет почти не отличаться от скриншота реальной программы. Цена лицензии — 169 долларов для одного пользователя.

http://www.carettasoftware.com

Библиотека Caretta GUI Design Studio не уступает DesignerVista, хотя многие иконки в ней устарели

GUI Design Studio распространяется в двух версиях: Professional и Express, по цене 129 и 499 долларов соответственно. Эту программу отличают от остальных наиболее широкие возможности программирования поведения интерфейса, доступные только в версии Professional. Видимо, этим и объясняется столь высокая цена.

Содержимому форм макета можно присваивать имена переменных. Переменные хранятся в базе данных, которая понимает слова SELECT, FROM и WHERE. Помимо данных, вводимых пользователем, в базу можно заранее загрузить свои данные. Для каждого элемента можно задать условия видимости и активности, исходя из значения тех или иных переменных.

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

Запускать интерактивные прототипы можно либо из самой программы, либо из специального viewer’а, который распространяется бесплатно. Разумеется, ничто не мешает просто экспортировать макеты в PNG, если не требуется интерактивность. Версия Professional поддерживает контроль версий макетов с помощью SVN.

GUI Design Studio ориентирована на создание макетов программ для ОС Windows. Набор шаблонов здесь не такой богатый, как в DesignerVista. Его можно немного расширить, импортировав собственные иконки в формате ico.

http://www.softandgui.co.uk

Своих 266 долларов UXToolbox вряд ли стоит, тут просто нет киллер-фичи, которая бы оправдывала ценник

Продукт английской компании softandGUI в первую очередь разработан для работы с мобильными приложениями. При создании нового проекта UXToolbox просит выбрать целевое устройство, под которое будет разрабатываться интерфейс. Шаблон с изображением этого устройства будет по умолчанию помещен на каждый из листов документа. В библиотеке присутствуют шаблоны нескольких современных смартфонов, а также MP3-плееров и портативных игровых консолей. Смысл наличия этих шаблонов не только в том, чтобы повторить внешний вид устройства. Они нужны также для того, чтобы элементы интерфейса соотносились по размеру с физическим размером экрана. Учитывая разнообразие устройств на Android, полезно было бы иметь шаблон некоего обобщенного смартфона, для которого можно было бы задать любой размер экрана. К сожалению, такой шаблон не предусмотрен разработчиками UXToolbox, а предложенный набор смартфонов довольно скуден: это все поколения iPhone, HTC Desire, Samsung Galaxy S, S3, Note 2, Omnia 7, а также несколько моделей Nokia и BlackBerry.

Макеты можно просматривать как в режиме wireframe, так и в режиме high-res

Интерактивность в UXToolbox реализована довольно примитивно. Любой элемент интерфейса можно использовать как ссылку на другой лист документа. Листы одного документа представляют собой полностью независимые макеты.

В программе есть два режима отображения макета: wireframe и high-res. Последний делает изображение более приятным для глаза, интерфейс становится похожим на скриншот.

К сожалению, библиотека шаблонов довольно скудна. С другой стороны, в ней есть специфические элементы интерфейса из iOS и Android. В программах, способных генерировать только схематические изображения, многие элементы (например, кнопки или полосы прокрутки) изображаются одними и теми же шаблонами для макетов веб-сайтов и мобильных приложений. Но если необходимо создать более реалистичный макет, такой подход неприемлем.

Просят за UXToolbox немало — 266 долларов за лицензию для одного пользователя. Обратить на нее внимание стоит, если ты хочешь быстро создавать аккуратные макеты, которые можно вставить не только в ТЗ разработчика, но и в презентацию.

http://www.powermockup.com/

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

Если ты часто готовишь презентации в PowerPoint, то, возможно, тебе было бы удобно составлять макеты интерфейсов для них прямо там. Для этой цели существует плагин под названием PowerMockup. Лицензия для одного пользователя обойдется в 60 долларов — недешево, если учесть, что это не полноценный программный продукт, а всего лишь библиотека шаблонов для PowerPoint. Чуть ли не половина предложенных элементов — пиктограммы, не имеющие особого смысла при создании прототипа интерфейса. Впрочем, все базовые элементы присутствуют. Есть даже шаблоны, изображающие корпуса смартфона и планшета. А вот экранной клавиатуры, необходимой, чтобы полноценно изобразить интерфейс мобильной ОС, не предусмотрено.

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

Стандартный набор шаблонов Microsoft Visio 2013

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

Беглый поиск в Google привел к набору шаблонов Updated Sketch GUI Shapes for Visio, который, по всей видимости, когда-то распространялся автором Джонатаном Аббеттом на его сайте abbett.org. На момент написания этой статьи набора шаблонов на сайте уже не было. Мне удалось скачать его только со Stack Overflow, куда ее выложил один из пользователей конференции. В отличие от плагина для PowerPoint, этот набор шаблонов доступен в качестве родного для Visio файла с расширением vss и не пытается устанавливаться в системе как отдельная программа. Набор довольно скуден — всего 34 наименования.

Набор шаблонов Updated Sketch GUI Shapes for Visio

Как выяснилось, Visio 2013 имеет родной набор шаблонов для создания схем интерфейсов. Для того чтобы им воспользоваться, нужно при создании нового файла выбрать из категории «Программное обеспечение» пункт «Проволочная диаграмма». Штатный набор шаблонов Visio более полон и включает в себя почти все, что есть в специализированных программах, кроме макетов для мобильных приложений.

К сожалению, в данном случае специальное оказалось лучше универсального. В Visio отсутствует возможность изменять состояния элементов управления. Например, отсутствует такой элемент, как пустая (не выбранная) радиокнопка. А чтобы создать раскрывающийся список, придется использовать отдельные шаблоны для кнопки со стрелкой и каждого из элементов списка. Все это приводит к тому, что процесс создания макета в Visio занимает заметно больше времени, чем в специализированной программе.

Макеты как сервис

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

• http://proto.io Довольно дорогой сервис — 288 долларов в год для одного пользователя. При этом число проектов ограничено пятью. Набор шаблонов в библиотеке базовый. Интерактивность реализована лишь в виде ссылок на другие макеты.
• http://lumzy.com Также базовый набор шаблонов, но широкие возможности для обеспечения интерактивности макета. Этот сервис примечателен моделью оплаты. Несколько лет он функционировал как бесплатный. Теперь для пользования сервисом придется приобретать жетоны. Цена одного жетона — 26 центов, а срок действия — 12 часов. По истечении срока действия жетона сервис продолжит работать без ограничений, но время от времени будет напоминать о необходимости оплаты всплывающими сообщениями.
• https://gomockingbird.com Этот сервис отличается способностью быстро поделиться готовым макетом. Набор шаблонов годится только для отрисовки веб-приложений. Цена использования — 9 долларов в месяц при двух активных проектах.
• http://cacoo.com Этот сервис предлагает набор готовых макетов, представляющих собой примитивные изображения некоторых типовых вариантов верстки сайта. Впоследствии предложенный макет можно доработать под свои нужды. Есть возможность совместного редактирования макета, а вот просто показать макет человеку, не зарегистрированному на сайте, не получится. Возможен экспорт в форматы PNG, SVG, PDF, PS, PPT. Цена — 49 долларов в год для одного пользователя. Также есть бесплатный план, несколько ограниченный в возможностях совместного редактирования.
• https://moqups.com/ Очень простой инструмент с понятным интерфейсом. Библиотека шаблонов не самая богатая, но включает в себя элементы интерфейса iOS. Минимальный тарифный план стоит 99 долларов в год. Он позволяет иметь десять активных проектов и дает гигабайт дискового пространства для хранения изображений.
• http://www.ninjamock.com Сервис интересен в основном возможностью создания макетов интерфейсов мобильных приложений. Поддерживаются все популярные ОС, не исключая Windows Phone и Windows RT. Набор шаблонов довольно богатый, хотя в него включены некоторые странные элементы. Такие, как, например, стандартное уведомление о встрече, запланированной в календаре. Пользоваться ninjamock.com можно бесплатно в некоммерческих целях и создавая не более трех проектов на аккаунт.
• https://www.wireframes.org Набор шаблонов и функциональность позволяют отрисовывать довольно примитивные макеты веб-интерфейсов. Присутствует возможность совместного редактирования макетов, а также экспорт в PNG, PDF и (внимание)… JSON. Последнее может быть полезно ввиду того, что у сервиса есть братья-близнецы, очевидно работающие на том же ПО. Например, сайт mockuptiger.com. Пользоваться описанным приложением можно в онлайне за 0–500 долларов в год, в зависимости от необходимого числа проектов. А можно один раз купить лицензию за 97 долларов и установить его на свой сервер.
• http://www.appmockuptools.com/ На этом сайте можно купить блокнот для ручной отрисовки макетов интерфейсов для iPad и iPhone. Блокнот продается в виде PDF-файла, печатать который придется самостоятельно.
• http://www.invisionapp.com/ Этот сервис позволит превратить растровый макет сайта или приложения в интерактивный. Для этого нужно импортировать в облачное приложение растровые файлы, нанести на них разметку и задать действия, выполняемые при нажатии на тот или иной участок макета. Таким действием может быть переход к другой странице макета или другой области этой же страницы, а также переход по внешней ссылке. Минимальная цена использования — 15 долларов в месяц при трех активных проектах.
• http://concept.ly/ Близкий аналог invisionapp.com. Проект запустился недавно, поэтому в течение некоторого времени его использование бесплатно.

кто именно нужен компаниям / Хабр

В последние несколько лет проектирование интерфейсов начало приобретать немалую популярность. Отечественные компании, чей бизнес так или иначе связан с компьютерами и интернетом стали понимать, что просто «дизайна» в том понимании, в каком он употребляется у нас уже недостаточно, нужно не только красиво, но и удобно. В результате мы видим немалое количество вакансий с такими словами в описании, как UX, UI, UCD, usability и всё в таком духе.

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

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

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

Цель исследования

В ходе анализа я хотел понять:

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

Источники данных

Для анализа были взяты вакансии с сайта hh.ru, т.к. именно его я чаще всего просматривал. Сначала я собирался проанализировать 100 резюме, но просмотрев 30, понял, что данные уже часто повторяются и решил остановиться на 40.
Подобное исследование я делаю впервые и совсем не претендую на объективность и полноту, но надеюсь, что общее положение дел мне всё-таки удалось показать.

Вакансии для исследования

Я обращал внимание на такие заголовки:

• ux/ui-designer;
• проектировщик интерфейсов;
• юзабилити-специалист ;
• дизайнер-проектировщик;

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

Востребованность профессии

Поиск по словосочетанию «проектировщик интерфейсов» выдал мне 120 вакансий в России, из них я и выбрал первые 40. Среди них было много повторяющихся в разных городах, поэтому реальная цифра будет меньше.
Для сравнения, поиск по запросу «web-дизайнер» выдал мне 1027 результатов.

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

Распределение вакансий по городам России

Здесь никаких сюрпризов. С очень большим отрывом лидируют Москва и Санкт-Петербург. В регионах проектировщики нужны, но крайне редко. Причина на мой взгляд в том, что такие специалисты нужны в основном в продуктовые команды, разрабатывающие веб-сервисы, приложения, десктопные программы (подробнее об этом ниже). А эти команды сосредоточены в основном в Москве и Питере, отсюда и такая статистика.

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

Уровень зарплаты

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

Уровень зарплаты проектировщика интерфейсов

Сферы деятельности

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

Распределение вакансий по сферам деятельности

Типы платформ

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

Распределение вакансий по типам платформ

Требования к кандидатам

Я не стал помещать сюда требования по опыту, поскольку оно присутствует почти в 100% вакансий. В большинстве случаев работодатель ориентируется на опыт работы в 2-3 года по профилю деятельности. Работников с небольшим или отсутствующим опытом приглашали всего на две вакансии.
Наличие портфолио так же интересует большинство работодателей. В отклике на вакансию просят предоставить от 3 до 10 примеров лучших работ. Многие работодатели говорят о необходимости выполнить тестовое задание, а в паре вакансий оно даже было описано.

Итак, из сорока вакансий большинство содержало следующие требования:

Требования к проектировщикам, описанные в большинстве вакансий

Как мы видим, фотошоп продолжает оставаться программой №1 для всего, что имеет отношение к визуализации. Из программ прототипирования чаще всего упоминают Axure, но в большинстве случаев это не жесткое требование и у вас есть право предложить замену. Я например, использую Fireworks, который у меня работает за обе вышеупомянутые программы.

Среди популярных требований находятся и те, которые сопутствуют основной работе проектировщика: знание методологий проектирования, умение общаться с людьми и “понимание юзабилити”.

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

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

Обязанности

Теперь посмотрим, чем же предстоит заниматься проектировщику интерфейсов.
Понятное дело, проектированием интерфейсов, об этом прямо заявило большинство работодателей. Я не хочу тут поднимать рассуждение должен ли проектировщик уметь рисовать финальный дизайн, но вторая строчка диаграммы даёт нам ответ на этот вопрос. 27 работодателей из 40 хотят, чтобы проектировщик делал не только прототипы, wirefrmes, sketches и т.п., но и прорисовывал их окончательный вид. Причем, помимо дизайна интерфейсов и продумывания UX, проектировщик иногда должен уметь рисовать промо-страницы, баннеры, листовки, иконки и даже иллюстрации. Тем не менее, во многих компаниях проектировщик работает в паре с графическим дизайнером.

Основные обязанности проектировщика интерфейсов

Дополнительные требования

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

Дополнительные требования к проектировщику

Условия работы и разные заманухи

Уж не знаю, насколько определяющими в принятии предложения о работе являются теннисные столы, чаи, плюшки и молодой, сплоченный коллектив, но обо всём этом в it традиционно говорят очень многие. Отрадно, что часто пишут про “белое” трудоустройство и хорошую мед. страховку. Интересно, как дело обстоит на практике?
Зная нелюбовь it-шников рано просыпаться, многие готовы сдвигать рабочий день на час-три вперед.
Кто-то готов возить сотрудников на профильные конференции и раздавать книги, кто-то оплачивать спорт зал и обучать английскому, некоторые заманивают сотрудников макбуками, офисом класса «А» и бесплатным питанием.

Условия труда для проектировщика

Выводы

Проанализировав 40 вакансий, я заметил некоторую закономерность, разграничивающую вакансии по должностным обязаностям, требованиям и опыту. Рынку нужно два типа людей:
1. Проектировщик с навыками графического дизайна
Он знает наизусть Купера, Раскина и Нильсена, умеет вытягивать из людей информацию и превращает её в продукт, которым удобно пользоваться, что сможет подтвердить, проведя юзабилити-тестирование. Виртуозно владеет Axure и ему подобными, но и готов в фотошопе нарисовать макет на основе гайдов и готовых элементов.

2. Графический дизайнер с навыками проектирования

Для него каждый пиксель имеет значение. Он знает наизусть Ководство и советы Горбунова, тусует на Dribbble и Behance. Он рисует отличные кнопки и формочки, знает как сделать легкий и информационный дизайн, но в то же время понимает что значит удобно, а что нет и может предложить элегантное решение для интерфейсной проблемы.

А вообще, на мой взгляд, проектировщика или UX/UI дизайнера хорошо описывает фраза, найденная в одной из просмотренных мной вакансий: «разыскиваем крутого логика с художественным вкусом».

А чем у вас занимается проектировщик интерфейсов и кого вы ищете на эту должность?

12 инструментов для дизайна интерфейсов веб-сайтов в 2017 г.

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

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

Figma — это инструмент для совместной работы в реальном времени для различных дизайнов. Он держит всех на одной странице и поддерживает Windows и MacOS. Более того, Figma имеет инструменты тестирования iOS и может напрямую импортировать файлы Sketch.

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

Mockplus — это простой в освоении инструмент для создания прототипов, который предоставляет 3200 значков и более 200 компонентов. Он имеет восемь методов тестирования, что является наиболее полным инструментом в этой области. И я слышал, что в последнее время они запустят корпоративную версию и командную версию, и я уже не могу дождаться, чтобы увидеть это. Mockplus еще предстоит пройти долгий путь, но я думаю, что в будущем Mockplus станет основным инструментом дизайна UI / UX для дизайнеров.

Разработан компанией MACROMEDIA, но сейчас компания приобретена Adobe. Dreamweaver — лучший веб-редактор для создания веб-страниц и управления веб-сайтами. DW — это первый профессиональный визуальный инструмент веб-разработки для веб-дизайнеров, он может быстро создать потрясающую динамическую веб-страницу без ограничений платформ и браузеров.

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

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

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

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

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

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

Цель карандашного проекта — создать бесплатный и богатый ресурсами инструмент для создания диаграмм и прототипов графического интерфейса. Это простой в освоении инструмент для создания веб-интерфейсов для каждого дизайнера.

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

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

.

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

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

Декоративные шрифты

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

Декоративные шрифты для веб-сайта портфолио фотографа Тома Андерсона

Веб-дизайн Натана Райли — сочетание шрифтов, привлекающих внимание

Декоративный шрифт, выбранный для поддержки стиля веб-дизайна для торта от Tubik

Анимированная графика

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

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

Нюансная анимация взаимодействия с веб-сайтом от Buzzworth Studio

Анимированные иконки для темы Media by Icons8

Брутализм

В последние годы бруталистский подход продемонстрировал устойчивый рост и теперь, похоже, увеличивает скорость завоевания популярности. В целом считается, что веб-брутализм был вдохновлен бруталистской архитектурой 1950-х годов, характеризующейся тяжелым и «безжалостным» видом зданий.В цифровом дизайне брутализм — это стиль, который намеренно использует ряд стилистических приемов, чтобы выглядеть грубо, бессистемно или без украшений. Он может перекликаться с веб-сайтами в стиле начала 1990-х годов, будучи выраженным как простой, почти чистый HTML. Теперь разнообразие таких веб-дизайнов растет, поскольку это позволяет им появляться из коробки и производить впечатление на пользователей с точки зрения жесткой конкуренции с хорошо разработанными, элегантными и «причесанными» веб-сайтами.

Веб-сайт моно-электронной коммерции, созданный Tubik в брутальной манере

Брутализм в веб-дизайне для веб-сайта портфолио Мириам Петерс

Интерактивные развлечения

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

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

Интерактивная веб-страница Сочника

Полноэкранные видео и фото фоны

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

На веб-сайте CANALS используется редакционный дизайн веб-сайта с полноэкранным фото-фоном и декоративным шрифтом.

Дизайн веб-сайта Dreamers and Makers от Squarespace использует полноэкранные фото и видео фоны, минималистичную навигацию и разные направления для копирования строк

На сайте Ultima Gstaad применяется запоминающийся фото-фон, мгновенно задающий атмосферу и вызывающий необходимые эмоции

Веб-сайт Ultraviolet Way задает атмосферу и тему с помощью стильных полноэкранных фоновых фотографий и видео

Темная тема

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

Стильная концепция интерфейса музыкального плеера от Riotters на основе темной темы

Портфолио Дизайн веб-сайта Crucelli основан на темной теме и является супер интерактивным

Текстуры и материалы

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

Концепция веб-дизайна Натана Райли с фоном, напоминающим мятую бумагу.

Ограниченные цветовые палитры

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

Дизайн приложения File Explorer от Cuberto

Монохромная цветовая палитра в концепции дизайна приложения для самомотивации от Fireart

Веб-сайт книжного фестиваля от Tubik с ограниченной яркой цветовой палитрой и декоративными броскими шрифтами.

Текстовые веб-страницы

Эта тенденция представляет собой оппозицию ранее популярной и очень логичной тенденции использовать изображения в качестве основного крючка, привлекающего внимание пользователей: все больше и больше веб-дизайнеров и разработчиков приложений обращаются к страницам, которые вообще не содержат изображений.Веб-страницы или экраны такого типа обычно основаны на типографике и используют характеристики шрифтов — размер, полужирность, засечки и сан-засеки и т. Д. — как главный элемент красоты и привлекательности. Иногда плавная и запоминающаяся анимация помогает усилить их выразительность. Такой подход — еще один способ выделиться из толпы художественных страниц, составленных вокруг изображений.

Супер интерактивный сайт-портфолио Эндрю Легуэя основан на типографике как главном визуальном аттракторе

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

Эксперименты на сетках

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

Сайт фотографии Дэвида Уильяма Баума с экспериментальной интерактивной сеткой в ​​сочетании с элементами брутализма

Элегантный и оригинальный веб-дизайн от Green Chameleon отличается классным взаимодействием с сеткой фотографий и различными направлениями копирования элементов

Броское взаимодействие с сеткой постов в веб-дизайне от Sochnik

Конечно, это лишь малая часть творческих экспериментов, которые мы ожидаем увидеть в этом году, которые только начали проявляться.Хотите добавить какой-нибудь тренд, не упомянутый в списке? Приглашаем присоединиться к обсуждению в комментариях.

Об авторе: Марина Яланская, исследователь дизайна и создатель контента, редактор блога Icons8
Заглавное изображение из Clip pack на Ouch, разнообразной библиотеке векторных иллюстраций

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

.

10 основных советов по дизайну UI (пользовательского интерфейса)

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

И ключ к этому — в первую очередь и всегда думать о своем пользователе.

К счастью, хотя веб-дизайн — относительно новая дисциплина, он во многом обязан научным исследованиям взаимодействия человека и компьютера (HCI). И эти 9 удобных рекомендаций, взятых из исследования HCI, помогут вам сосредоточиться на своих пользователях при разработке веб-сайтов и приложений.

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

1. Знайте своих пользователей

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

Чтобы достичь такого уровня эмпатии, требуется нечто большее, чем тщательный анализ характеристик. Это требует знакомства с людьми, которые используют ваш сайт.Это означает разговаривать с ними лицом к лицу, наблюдать, как они используют ваш продукт (и, возможно, другие), и задавать им более глубокие вопросы, чем «Что вы думаете об этом дизайне?»

Каковы их цели? Что мешает им достичь этих целей? Как веб-сайт может помочь им преодолеть эти проблемы или обойти их?

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

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

2. Определите, как люди используют ваш интерфейс

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

Tinder: удобство использования приложения буквально определяется легкостью и импульсивностью простого смахивания.

Люди используют веб-сайты и приложения двумя способами: напрямую (взаимодействуя с элементами интерфейса продукта) и косвенно (взаимодействуя с элементами пользовательского интерфейса, внешними по отношению к продукту).

Примеры прямого взаимодействия

• ‍Нажатие кнопки
• Проведение карты
• Перетаскивание объекта кончиком пальца

Примеры непрямого взаимодействия

• Наведение и щелчок мышью
• Использование клавишных команд / горячих клавиш
• Ввод в поле формы
• Рисунок на планшете Wacom

‍Иногда взаимодействие оказывается слишком простым.

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

3. Установите ожидания

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

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

Дизайн, оправдывающий ожидания

• Выделение кнопки, соответствующей желаемому действию
• Использование широко известного символа (например, корзины для кнопки удаления, знака плюса для добавления чего-либо или увеличительного стекла для поиска) в сочетании с копией
• Выбор цвета с релевантным значением (зеленый для кнопки «перейти», красный для «стоп»)

Установка ожиданий с копией

• Запись четкой копии кнопки
• Обеспечение направленного / поощрительного копирования в пустых состояниях
• Выдача предупреждений и запрос подтверждения

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

‍В InVision щелчок по значку корзины не приводит к немедленному удалению экрана. Вместо этого он спрашивает, уверены ли вы, и сообщает, что это невозможно отменить.

4. Предвидеть ошибки

> Человеку свойственно ошибаться; прощать, божественный.

Александр Поуп, «Очерк критики»

Люди делают ошибки, но они не должны (всегда) страдать от последствий. Есть два способа уменьшить влияние человеческой ошибки:

1. Предотвращение ошибок до их возникновения
2. Предоставьте способы исправить их после того, как они возникнут

Вы видите множество методов предотвращения ошибок в электронной коммерции и разработке форм.Кнопки остаются неактивными, пока вы не заполните все поля. Формы обнаруживают, что адрес электронной почты был введен неправильно. Во всплывающих окнах вас спрашивают, действительно ли вы хотите отказаться от своей корзины для покупок (да, я хочу, Amazon — независимо от того, насколько это может травмировать беднягу).

Предвидеть ошибки часто менее неприятно, чем пытаться исправить их постфактум. Причина в том, что они возникают до того, как наступит удовлетворительное ощущение завершения, возникающее при нажатии кнопки «Далее» или «Отправить».

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

Когда вы пишете сообщения об ошибках, убедитесь, что они делают две вещи:

1. Объясните проблему. Например: «Вы сказали, что родились на Марсе, который люди еще не колонизировали. Все же.»
2. Объясните, как исправить. Например: «Пожалуйста, введите место рождения здесь, на Земле».

Обратите внимание, что вы можете взять страницу из той же книги для ситуаций, не связанных с ошибками. Например, если я что-то удаляю, но это возможно восстановить, сообщите мне об этом с помощью строки с копией вроде «Вы всегда можете восстановить удаленные элементы, перейдя в корзину и нажав« Восстановить ».”

Принцип предупреждения ошибки пользователя называется принципом poka-yoke. Poka-yoke — это японский термин, который переводится как «защита от ошибок».

5. Оставьте отзыв — быстро

В реальном мире окружающая среда дает нам обратную связь. Мы говорим, а другие отвечают (обычно). Мы чешем кошку, и она мурлычет или шипит (в зависимости от ее настроения и от того, насколько сильно мы сосем, когда кошка царапает).

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

Так дайте мне анимацию загрузки. Сделайте так, чтобы эта кнопка хлопала и возвращалась назад, когда я нажимаю на нее, но не слишком сильно. И дайте мне виртуальную пятерку, когда я делаю что-то, что вы, и я согласен, великолепно. (Спасибо, MailChimp.)

‍‍MailChimp предлагает как обратную связь, так и поддержку, когда вы планируете или отправляете электронное письмо.

Просто убедитесь, что все происходит быстро. Usability.gov определяет любую задержку более 1 секунды как прерывание. Более 10 секунд сбой.И последний щедрый: примерно для половины населения США 3 секунды достаточно, чтобы вызвать отказ.

Если страница загружается менее чем за 5 секунд, не отображается индикатор выполнения, так как это действительно увеличивает время загрузки. Вместо этого используйте визуализацию, не предполагающую прогресса, например, печально известную «вертушку смерти» Mac. Но не то. Если вы используете на своем сайте индикаторы выполнения, попробуйте несколько визуальных приемов, чтобы загрузка казалась более быстрой.

6.Тщательно продумайте размещение элемента и размер

Закон Фиттса, фундаментальный принцип взаимодействия человека с компьютером (HCI), гласит:

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

Другими словами: чем ближе и / или крупнее объект, тем быстрее вы можете навести на него курсор (или палец). Это, очевидно, имеет всевозможные последствия для методов взаимодействия и дизайна пользовательского интерфейса, но три из наиболее важных:

Сделайте кнопки и другие «мишени для щелчка» (например, значки и текстовые ссылки) достаточно большими, чтобы их можно было легко увидеть и щелкнуть.Это особенно важно для типографики, меню и других списков ссылок, так как из-за недостатка места люди будут нажимать не те ссылки снова и снова.

Сделайте кнопки для наиболее распространенных действий крупнее и заметнее.

Разместите элементы навигации (и другие распространенные интерактивные визуальные элементы, например панели поиска) по краям или углам экрана. Последнее может показаться нелогичным, но оно работает, потому что снижает потребность в точности: пользователю не нужно беспокоиться о превышении целевого клика.

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

7. Не игнорируйте стандарты

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

Почему? Потому что обновленная версия знакомого взаимодействия или интерфейса добавляет «когнитивную нагрузку»: заставляет людей снова задуматься о процессе, которому они уже научились.Очевидно, что вы можете изобретать велосипед сколько угодно, но только если это действительно улучшит дизайн.

Это практическое правило объясняет, почему в строке меню Документов Google есть почти все те же параметры, что и в Microsoft Word до Vista:

‍ Строка меню Microsoft Word до Vista.

‍ Строка меню Документов Google, 2015

‍

Это также объясняет, почему Pocket несколько лет назад пришлось изменить расположение кнопки архива в своем приложении для Android.

‍‍Изменение одной кнопки для большего соответствия шаблонам проектирования Android повысило вероятность продолжения использования Pocket у новых пользователей на 23%.

До осени 2013 года кнопка архивации находилась в верхнем левом углу экрана — именно там, где в спецификациях Android должна быть кнопка «Вверх». Pocket хотел сосредоточить внимание людей на опыте чтения, а не дублировать существующий аппаратный элемент управления, но непоследовательное размещение заставляло новых пользователей случайно закрывать и архивировать статью, которую они читали, вместо того, чтобы просто возвращаться к списку чтения, как ожидалось.

Это крошечное изменение «увеличило вероятность [новые пользователи] продолжать использовать Pocket с этого момента на 23%».

8. Сделайте ваши интерфейсы легкими для изучения

Когда дело доходит до простоты, люди часто цитируют работу гарвардского психолога Джорджа Миллера под названием «Магическое число семь, плюс или минус два: некоторые ограничения нашей способности обрабатывать информацию». В статье предполагается, что люди могут с любой надежностью удерживать в своей краткосрочной памяти только 5–9 вещей.Сам Миллер назвал это совпадением, но это, похоже, никого не удерживает от его цитирования.

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

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

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

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

Совет

Pro: избегайте использования «узнать больше» и аналогичного неспецифического текста в ссылках и кнопках.Почему? Потому что он не сообщает пользователям, о чем они «узнают больше». Часто люди просто просматривают страницу в поисках ссылки, которая ведет их туда, куда они хотят перейти, и 15-кратное повторение «узнать больше» не помогает. Это особенно актуально для пользователей программ чтения с экрана.

9. Упростите процесс принятия решений

Слишком большая часть Интернета кричит на нас: «Баннеры» внезапно расширяются, превращаясь в полноэкранную рекламу. Появляются модальные окна, умоляющие нас подписаться на блоги, которые у нас еще не было возможности читать.Межстраничные видео останавливают нас, заставляя смотреть, как драгоценные секунды тикают очень-очень медленно. И даже не заставляйте меня начинать с виджетов, всплывающих окон, всплывающих подсказок…

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

Это влияет практически на все, что мы создаем:

• Габаритные размеры
• Меню навигации
• Ценовые страницы
• Индексы блога
• Каналы контента

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

Совет

Pro: иногда вы действительно хотите, чтобы пользователи притормозили и рассмотрели свои варианты. Вот почему мозаичный дизайн Pinterest, Dribbble и многих блогов действительно работает хорошо. В конце концов, чем больше вариантов вы выберете, тем больше вероятность, что вы найдете тот, который вам подходит.

10. Слушайте данные

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

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

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

Так что настройте аналитику для своего сайта и регулярно анализируйте ее. Существует множество различных инструментов аналитики, но я рекомендую Google Analytics и / или Mixpanel, в зависимости от типа проекта.

Mixpanel фокусируется на событиях, поэтому он собирает данные на основе действий посетителя на вашем сайте, в то время как Google Analytics более ориентирован на поведение, давая вам время сеанса, источники трафика и т. Д. Хотя оба инструмента могут предоставлять обе формы данных, они действительно блестят в их сферах деятельности, поэтому выбирайте то, что лучше всего соответствует вашим потребностям.

Примечание: оба этих инструмента бесплатны для определенного количества точек данных. Webflow и аналогичные платформы обычно упрощают настройку аналитики за счет простого обмена ключами API.

Отличный интерактивный дизайн на сайтах Webflow

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

Расширяющийся круг навигации

Уолдо Брудрик создал забавное анимированное меню для мобильных устройств и компьютеров.При загрузке страницы кружок в правом нижнем углу читает «Меню». При щелчке он раскрывается, показывая доступные страницы, и меняется на X, позволяя пользователю закрыть меню и переориентировать контент.

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

Ты купишь той девушке выпить?

Дизайнер Шейн Хёрт собрал это удивительное интерактивное дерево решений, чтобы помочь вам решить, покупать ли девушке выпить или нет.Дизайн включает в себя массу контента, но позволяет вам сосредоточиться на поставленной задаче: ответить на текущий вопрос и двигаться дальше к своему решению. Как сделать интерфейс простым, Шейн.

Редизайн Uniqlo

Дизайнер

Тим Ноа однажды делал покупки на сайте Uniqlo, когда он понял, насколько сложна и уникальна их навигационная система. Вдохновленный, он решил «воссоздать это, но более удобным для планшетов и мобильных устройств».

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

Примечание: этот редизайн был личным проектом и никоим образом не связан с Uniqlo.

Ведущий спортивный ускоритель

В начале 2017 года дизайнер Яро Квастенберг запустил сайт, который действительно демонстрирует силу визуального взаимодействия в Webflow: Lead Sport Accelerator.

Сайт действительно выделяется двумя из вышеупомянутых советов.Первое: знание своих пользователей. Lead Sports Accelerator знает, что они пытаются привлечь разработчиков продуктов, и для этого они должны произвести хорошее первое впечатление через свой веб-сайт. Второй — обратная связь. Прокручиваете ли вы, наводите курсор мыши или нажимаете на элемент на странице, он немедленно реагирует на действия посетителя, часто драматическим и восхитительным образом.

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

Итак, основы вы изучили

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

.

Дизайн интерфейса | Руководство по веб-стилю 3

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

Даже просмотр отдельных веб-страниц ограничен для многих пользователей. Большинство веб-страниц не умещаются полностью на стандартном офисном мониторе; обычно есть нижняя часть страницы, которую пользователь не видит. Пользователи мобильных устройств с маленьким экраном имеют еще более ограниченный порт просмотра, а просмотр веб-страницы в целом невозможен для пользователей программ чтения с экрана, которые обращаются к страницам по одному элементу за раз. Веб-страницы должны давать пользователю явные подсказки относительно контекста и организации сайта, потому что только небольшой сегмент любого сайта доступен одновременно (рис.4.10).

Рисунок 4.10. Независимо от размера вашего сайта, пользователи видят только одну страницу за раз.

Очистить средства навигации

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

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

Например, на сайте Digital Web Magazine заголовок появляется на каждой странице (рис. 4.11). Заголовок эффективен (предлагает несколько вариантов на небольшом пространстве) и предсказуем (он всегда находится вверху каждой страницы), а также обеспечивает единообразную идентификацию на всем сайте.

Рисунок 4.11 — Заголовки необходимы как для идентификации сайта, так и для согласованной навигации. www.digital-web.com

Без тупиков

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

Рисунок 4.12. Пользователи могут заходить на сайт где угодно, и им нужны мгновенные подсказки для идентификации сайта и маркеры «вы здесь».

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

Прямой доступ

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

Простота и логичность

Пользователи не впечатлены сложностью, которая кажется беспричинной, особенно тех пользователей, которые могут зависеть от сайта для получения своевременной и точной информации.Метафоры вашего интерфейса должны быть простыми, знакомыми и логичными — если вам нужна метафора для сбора информации, выберите знакомый жанр, например папки с файлами. Необычная или своеобразная «креативная» навигация и метафоры домашней страницы всегда терпят неудачу, потому что накладывают на пользователя незнакомую, непредсказуемую нагрузку на интерфейс. Сбейте пользователей с толку странной домашней страницей, и они быстро нажмут кнопку «назад» и перейдут к следующему элементу на странице результатов Google, и вы потеряете потенциального читателя или клиента.Пусть ваш контент сияет, а интерфейс отступает. Opera мастерски сочетает жирный шрифт с минималистичным, но удобным интерфейсом (рис. 4.13).

Рисунок 4.13. Сайт Opera — это шедевр, сочетающий высокую функциональность и сдержанные элементы интерфейса. www.opera.com

Лучшие информационные конструкции никогда не замечаются. Как только вы узнаете, где находятся стандартные ссылки на графике заголовка страницы, интерфейс становится почти невидимым. Навигация проста и никогда не конкурирует с контентом за ваше внимание (рис.4.14).

Рисунок 4.14. Последовательные заголовки Adaptive Path позволяют пользователям сразу увидеть структуру сайта.

Для максимальной функциональности и удобочитаемости дизайн вашей страницы и сайта должен основываться на едином шаблоне модульных единиц, которые используют одни и те же базовые сетки макета, графические темы, редакционные соглашения и организационные иерархии. Цель — быть последовательным и предсказуемым; ваши пользователи должны чувствовать себя комфортно, исследуя ваш сайт, и быть уверенными, что они смогут найти то, что им нужно.Графическая идентичность серии страниц на веб-сайте дает визуальные подсказки для непрерывности информации. Меню заголовка, присутствующее на каждой странице сайта Capgemini, создает единый пользовательский интерфейс и фирменный стиль (рис. 4.15).

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

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

Целостность и стабильность конструкции

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

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

Обратная связь и диалог

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

Пропускная способность и взаимодействие

Пользователи не потерпят длительных задержек. Исследования показали, что для большинства вычислительных задач порог разочарования составляет около десяти секунд.Дизайн веб-страниц, который плохо «настроен» на скорость доступа к сети типичных пользователей, только расстроит их. Проверьте журналы своего веб-сайта, чтобы убедиться, что вы понимаете типичное местоположение пользователя и сетевые подключения. Например, если у вас много международных пользователей, вы можете быть более консервативными в отношении больших изображений на своих страницах (рис. 4.16).

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

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

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

Условные обозначения при проектировании интерфейсов

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

Рисунок 4.17 — Канонический макет страницы. Не каждая страница включает в себя все показанные здесь элементы.

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

Что находится в области заголовка?

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

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

«Вкладки папок» идеальны, когда на вашем сайте относительно мало (пять-семь) основных категорий навигации.Если у вас более семи основных категорий, подумайте о том, чтобы отказаться от метафоры вкладки в пользу хорошо организованного набора текстовых ссылок (рис. 4.18, вверху). При тщательном проектировании вкладки заголовков также могут обрабатывать сложную навигацию (рис. 4.18, в центре).

Рисунок 4.18 — Различные варианты оформления заголовков и маркеры «вы здесь».

Семантически списки навигации заголовков всегда должны быть помечены как списки html, даже если то, что появляется на странице, больше похоже на набор графических изображений вкладок папок.Эта семантическая обработка списков заголовков имеет серьезные преимущества для универсальной доступности и помогает прояснить организацию вашего сайта для поисковых систем. Дизайнеры могут использовать каскадные таблицы стилей, чтобы стилизовать списки навигационных ссылок, чтобы они выглядели как вкладки. Заголовки страниц Opera представляют собой минималистичные вкладки, но в компактном дизайне передают все важные функции заголовка страницы (рис. 4.18, внизу).

Правый или левый столбцы для навигационных ссылок?

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

Рисунок 4.19 — Классическая левая локальная навигация с иерархическими списками.

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

Маршруты для навигации

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

Рисунок 4.20 — Два примера цепочек навигации внутри или под заголовком страницы.

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

.