course user interface - lesson 3

ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСОВ

занятие №3

Alexander LisovskyCo-Founder at ZZ Photo, UX/UI designer

a.lisovsky@zzphoto.mefacebook.com/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky

Если бы дизайнеры…youtube.com/watch?v=oxUbXgGnSyA

Промо страницы(landing page)

http://habrahabr.ru/post/143923/

Что такое landing page?Определим понятие landing page:

С технической точки зрения landing page – это обычная веб-страница (HTML, CSS, текст, картинки, видео и т.д.)

С точки зрения бизнеса – это страница, которая подталкивает пользователя совершить требуемое действие (покупка или подписка)

С точки зрения пользователя – это страница, на которую он перешел по ссылке с другого сайта (из поисковика, твиттера, кликнув на баннер)

http://habrahabr.ru/post/143923/

Зачем?Три наиболее частых причины создания landing page:1. заставить пользователя зарегистрироваться или подписаться на рассылку

2. продать конкретный продукт в конкретной ситуации (распродажа или промо-акция)

3. заставить пользователя скачать или установить софт

http://habrahabr.ru/post/143923/

Сall to actionsВыражайтесь четко. Конкретно говорите пользователю, что именно он должен сделать и что будет потом.

Не злоупотребляйте call to action-ами. Если на сайте их мало, то можно сфокусироваться на том, чтобы пользователь предпринял желаемое действие как можно скорее.

Используйте кнопки. Кнопки – это традиционный контрол и любой пользователь знает, что по нему можно кликнуть. Хороший дизайн кнопки еще раз обращает внимание на call to action.

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

https://squareup.com

http://habrahabr.ru/post/143923/

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

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

http://habrahabr.ru/post/143923/

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

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

Используйте релевантные слова. Используйте слова и фразы, благодаря которым пользователи придут к Вам из поисковиков – используйте тэги h1 и h2 для заголовков.

https://www.weddingpartyapp.com

http://habrahabr.ru/post/143923/

ПростотаКаждый элемент страницы должен подталкивать пользователя совершить действие. Убирайте лишнее.

У landing page должен быть один главный call to action. Цель странички должна быть предельно ясна и заключается в том, что пользователю необходимо выполнить одно единственное действие. Наличие других действий призвано способствовать выполнению главного.

На landing page должно быть много свободного пространства. Слишком перегруженная страница может отпугнуть пользователя.

https://www.dropbox.com

http://habrahabr.ru/post/143923/

Траектория взглядаРасположите элементы landing page в логической визуальной последовательности. Определите порядок, в котором нужно просматривать элементы и придерживайтесь его. Узнать больше о визуальной последовательности можно тут: http://sixrevisions.com/graphics-design/visual-weight-designs/

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

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

http://www.letsdothis-now.org

http://habrahabr.ru/post/143923/

РелевантностьСоздавайте отдельные landing page для каждой маркетинговой кампании. Если Вы делаете рекламную компанию с Facebook, то это должно быть отражено на landing page.

Landing page должна меняться в зависимости от источника – добавляйте контент, промо-коды и call to action-ы.

http://habrahabr.ru/post/143923/

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

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

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

http://habrahabr.ru/post/143923/

Битва за довериеРазмещайте социальные данные из авторитетных и известных веб-сервисов. Хорошим примером является количество лайков в Facebook.

Используйте элементы доверия связанные с call to action и размещайте их рядом.

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

http://www.freshbooks.com

http://www.freshbooks.com

http://www.freshbooks.com

http://habrahabr.ru/post/143923/

ДефицитПомещайте на странице текст, который передает ощущение срочности. Например, четко заявив, что специальные скидки скоро закончатся, можно призвать пользователей купить товар прямо сейчас.

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

Можно повторить?с начала…

Неужели Photoshop?!

File > New

Модульная сетка: колонки

Модульная сетка: текстовая сетка

Модульная сетка: блоки

Практическое задание:Индивидуальное задание. Времени: 135 минут. Создаем главную страницу по шаблону http://london-template.webflow.com/

Оформление содержания сайта

http://we-make-lj.livejournal.com

1. Заголовки

H1 - он в названии страницыH2 - делит страницу на смысловые блокиH3 - дробит смысловые блокиH4 - чуть больше основного набораH5 - равный шрифту основного набора

http://we-make-lj.livejournal.com

2. Тексты

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

http://we-make-lj.livejournal.com

3. Списки

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

http://we-make-lj.livejournal.com

4. Ссылки

обычные ссылки в текстеобычное состояниенаведеннаяпосещеннаявторостепенные ссылки (например теги или хлебные крошки)обычное состояниенаведеннаяпсевдоссылки (открывает слой или данные без перезагрузки экрана)обычное состояниенаведеннаяссылка, которая открывает e-mailссылка, которая открывает звонок Skypeссылка, которая откроется в новом окнессылка, которая открывает ссылку на карту (Google, Yandex)

http://we-make-lj.livejournal.com

5. Псевдоактивность

аккордеон (для примера на 3-4 пункта) обычное состояние, с одним развернутым пунктом, и на один из других пунктов наведен курсортабы (для примера 3-4 пункта) один пункт развернут и активен, один пункт спокойный/обычный, на один наведен курсорtooltip (подсказка) для аббривиатур, показано как выделяется текст, и всплывшая подсказка при наведении курсора (+ смена внешнего вида курсора)

http://we-make-lj.livejournal.com

6. Иллюстрации

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

http://we-make-lj.livejournal.com

7. Таблицы

один стиль оформления простой таблицывторой стиль оформления более сложной таблицы

http://we-make-lj.livejournal.com

8. Формы

Простая форма, помещенная внутрь страницы (например «Обратная связь» или «Регистрация»)содержит в себе:

сам блок formполя строчного ввода (input), показанообычное поленедоступное полеполе в которое сейчас происходит вводполе в котором ошибочные данныеполе ввода текста (textarea)размещение названия поляпоказано как реализовать поля, обязательные для заполнения (*)подсказка к полю в каком формате нужно вводить данные.подсказку о сообщении того, что какое-то поле заполнено неправильногалочки checkbox, в двух состояниях (пустая и чекнутая)

http://we-make-lj.livejournal.com

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

9. Компоновки

(3) в одну колонку (основной набор)(1:1:1) в три равных колонки(2:1) в две колонки: большая и малая(1:2) в две колонки: малая и большая(1:1) в две равные колонкиДругих дроблений внутри поля контента данный дизайн не предусматривает.

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

http://we-make-lj.livejournal.com

10. Файлы для скачивания

Word (doc, docx, rtf)ExcelPDFRARZIPлюбой другой формат (общая иконка)

http://we-make-lj.livejournal.com

Теперь точно, все понял!

Рекомендуемые уроки по Photoshop:Google “Photoshop video tutorials for beginners”

Alexander LisovskyCo-Founder at ZZ Photo

UX/UI designer

a.lisovsky@zzphoto.mefacebook.com/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky