Course User interface at Bionic University by Oleksandr Lisovskyi

1. ПРОЕКТИРОВАНИЕ
ИНТЕРФЕЙСОВ
занятие №3

2. Alexander Lisovsky
Co-Founder at ZZ Photo, UX/UI designer
a.lisovsky@zzphoto.me
facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twitter.com/lisovsky

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

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

5. http://habrahabr.ru/post/143923/
Что такое landing page?
Определим понятие landing page:
С технической точки зрения landing page – это обычная
веб-страница (HTML, CSS, текст, картинки, видео и т.д.)
С точки зрения бизнеса – это страница, которая
подталкивает пользователя совершить требуемое
действие (покупка или подписка)
С точки зрения пользователя – это страница, на
которую он перешел по ссылке с другого сайта (из
поисковика, твиттера, кликнув на баннер)

6. http://habrahabr.ru/post/143923/
Зачем?
Три наиболее частых причины создания landing page:
1. заставить пользователя зарегистрироваться или
подписаться на рассылку
2. продать конкретный продукт в конкретной ситуации
(распродажа или промо-акция)
3. заставить пользователя скачать или установить софт

7. http://habrahabr.ru/post/143923/
Сall to actions
Выражайтесь четко. Конкретно говорите пользователю, что именно
он должен сделать и что будет потом.
Не злоупотребляйте call to action-ами. Если на сайте их мало, то
можно сфокусироваться на том, чтобы пользователь предпринял
желаемое действие как можно скорее.
Используйте кнопки. Кнопки – это традиционный контрол и любой
пользователь знает, что по нему можно кликнуть. Хороший дизайн
кнопки еще раз обращает внимание на call to action.
Дополнительная информацию должна быть наготове. Именно она
должна убедить пользователя предпринять необходимое действие.

8. https://squareup.com

9. http://habrahabr.ru/post/143923/
Заголовок
Именно он дает пользователю понять, чего ожидать
от этой странички и что он попал в нужно место.
У заголовка всего одна цель – заставить
пользователя оставаться на странице как можно
дольше.

10. http://habrahabr.ru/post/143923/
Заголовок
Пишите простые и короткие заголовки. Не тратьте время
пользователя, объясните ему главную идею того, что он
может получить на этом сайте как можно скорее.
Дизайн должен привлекать внимание пользователя.
Используйте большой шрифт и располагайте заголовок на
заметном месте – вверху страницы, там где ему положено
быть.
Используйте релевантные слова. Используйте слова и
фразы, благодаря которым пользователи придут к Вам из
поисковиков – используйте тэги h1 и h2 для заголовков.

11. https://www.weddingpartyapp.com

12. http://habrahabr.ru/post/143923/
Простота
Каждый элемент страницы должен подталкивать
пользователя совершить действие. Убирайте лишнее.
У landing page должен быть один главный call to action. Цель
странички должна быть предельно ясна и заключается в том,
что пользователю необходимо выполнить одно
единственное действие. Наличие других действий призвано
способствовать выполнению главного.
На landing page должно быть много свободного
пространства. Слишком перегруженная страница может
отпугнуть пользователя.

13. https://www.dropbox.com

14. http://habrahabr.ru/post/143923/
Траектория взгляда
Расположите элементы landing page в логической визуальной
последовательности. Определите порядок, в котором нужно
просматривать элементы и придерживайтесь его. Узнать больше о
визуальной последовательности можно тут:
http://sixrevisions.com/graphics-design/visual-weight-designs/
Используйте графические элементы. Стрелки, иконки и яркие
картинки могут помочь направить взгляд пользователя на нужную
область страницы.
Используйте контрастные цвета для определенных компонентов
веб-страницы. Яркие элементы выделяются, привлекая к себе
внимание.

15. http://www.letsdothis-now.org

16. http://habrahabr.ru/post/143923/
Релевантность
Создавайте отдельные landing page для каждой
маркетинговой кампании. Если Вы делаете
рекламную компанию с Facebook, то это должно
быть отражено на landing page.
Landing page должна меняться в зависимости от
источника – добавляйте контент, промо-коды и
call to action-ы.

17. http://habrahabr.ru/post/143923/
Битва за доверие
Предлагайте убедительную гарантию. Например, если Вы
предлагаете купить товар, то нужно предусмотреть возможность
возврата их денег, если они не удовлетворены приобретенным.
Постарайтесь предвидеть, в чем будет сомневаться
пользователь и убедите его в обратном. Расскажите подробнее,
что пользователь получит, совершив такое действие. Чаще всего
беспокойство связано с расходами, временем или безопасностью.
Если возможно, то предлагайте попробовать услугу или товар
бесплатно. Например, если Вы продаете платную услугу и
имеется несколько тарифов, то предусмотрите наличие
бесплатного тарифа где не нужно будет указывать данные
кредитной карты.

18. http://habrahabr.ru/post/143923/
Битва за доверие
Размещайте социальные данные из
авторитетных и известных веб-сервисов.
Хорошим примером является количество лайков в
Facebook.
Используйте элементы доверия связанные с call
to action и размещайте их рядом.
Будьте честными. Не стоит публиковать
поддельные статусы или отзывы с других сайтов.

19. http://www.freshbooks.com

20. http://www.freshbooks.com

21. http://www.freshbooks.com

22. http://habrahabr.ru/post/143923/
Дефицит
Помещайте на странице текст, который передает
ощущение срочности. Например, четко заявив,
что специальные скидки скоро закончатся, можно
призвать пользователей купить товар прямо
сейчас.
Динамически обновляйте информацию,
сообщающую о дефиците. Например, можно
показать на странице счетчик количества
оставшихся товаров.

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

25. Неужели Photoshop?!

26. File > New

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

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

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

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

45. Оформление содержания
сайта
http://we-make-lj.livejournal.com

46. 1. Заголовки
H1 - он в названии страницы
H2 - делит страницу на смысловые блоки
H3 - дробит смысловые блоки
H4 - чуть больше основного набора
H5 - равный шрифту основного набора
http://we-make-lj.livejournal.com

47. 2. Тексты
абзац основного набора
большой текст, для выделения важной
информации
малый тект, для сносок, примечаний,
подписей к иллюстрациям
цитата
маркер, для выделение фоном важной
информации
http://we-make-lj.livejournal.com

48. 3. Списки
ненумерованный список, с буллитами
нумерованный список
вложенный список (не больше одного
уровня вложенности)
http://we-make-lj.livejournal.com

49. 4. Ссылки
обычные ссылки в тексте
обычное состояние
наведенная
посещенная
второстепенные ссылки (например теги или хлебные крошки)
обычное состояние
наведенная
псевдоссылки (открывает слой или данные без перезагрузки
экрана)
обычное состояние
наведенная
ссылка, которая открывает e-mail
ссылка, которая открывает звонок Skype
ссылка, которая откроется в новом окне
ссылка, которая открывает ссылку на карту (Google, Yandex)
http://we-make-lj.livejournal.com

50. 5. Псевдоактивность
аккордеон (для примера на 3-4 пункта)
обычное состояние, с одним развернутым
пунктом, и на один из других пунктов наведен
курсор
табы (для примера 3-4 пункта) один пункт
развернут и активен, один пункт
спокойный/обычный, на один наведен курсор
tooltip (подсказка) для аббривиатур, показано
как выделяется текст, и всплывшая подсказка
при наведении курсора (+ смена внешнего вида
курсора)
http://we-make-lj.livejournal.com

51. 6. Иллюстрации
полосная иллюстрация, на всю ширину поля набора
иллюстрация в нутри блока текста
иллюстрация, которая при клике открывает бОльшую картинку
(обычное состояние и с наведенным курсором)
фотогаллерея, внутри текста
общий вид фотогаллереи, один элемент с наведенным
курсором
открыта большая картинка
видеоплеер внутри контента
(если нет нужды разрабатывать свой плеер, а использовать
готовый, то я рекомендую использовать Vimeo: он бесплатный,
его легко социализировать, и он настраивается по внешнему
виду и цветовой гамме, благодаря чему его можно вписать в
дизайн)
http://we-make-lj.livejournal.com

52. 7. Таблицы
один стиль оформления простой таблицы
второй стиль оформления более сложной
таблицы
http://we-make-lj.livejournal.com

53. 8. Формы
Простая форма, помещенная внутрь страницы
(например «Обратная связь» или «Регистрация»)
содержит в себе:
сам блок form
поля строчного ввода (input), показано
обычное поле
недоступное поле
поле в которое сейчас происходит ввод
поле в котором ошибочные данные
поле ввода текста (textarea)
размещение названия поля
показано как реализовать поля, обязательные
для заполнения (*)
подсказка к полю в каком формате нужно
вводить данные.
подсказку о сообщении того, что какое-то поле
заполнено неправильно
галочки checkbox, в двух состояниях (пустая и
чекнутая)
http://we-make-lj.livejournal.com
capcha, для проверки человечности
обычное состояние
сообщение, что капчу заполнили неверно
состояния обычных кнопок:
обычное состояние
наведенная
недоступная
прогресс выполнения
состояния кнопки по-умолчанию (более важной,
например «Отправить» или «Добавить»)
обычное состояние
наведенная
прогресс выполнения
сообщения
ОК, ваше сообщение отправлено
Ошибка, не удалось отправить сообщение

54. 9. Компоновки
(3) в одну колонку (основной набор)
(1:1:1) в три равных колонки
(2:1) в две колонки: большая и малая
(1:2) в две колонки: малая и большая
(1:1) в две равные колонки
Других дроблений внутри поля контента
данный дизайн не предусматривает.
Для других проектов могут быть другие
варианты компоновок, которые
обуславливаются дизайном и модульной
сеткой проекта.
http://we-make-lj.livejournal.com

55. 10. Файлы для скачивания
Word (doc, docx, rtf)
Excel
PDF
RAR
ZIP
любой другой формат (общая иконка)
http://we-make-lj.livejournal.com

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

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

58. Alexander Lisovsky
Co-Founder at ZZ Photo
UX/UI designer
a.lisovsky@zzphoto.me
facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twitter.com/lisovsky