Course User interface — Lesson 7
1 like830 views
Документ представляет собой урок по интерфейсам, в котором обсуждаются основы интерактивного дизайна, временные реакции систем и использование метафор в интерфейсах. Рассматриваются ошибки и успешные примеры навигации, а также важность визуального языка для улучшения пользовательского опыта. В завершение упоминается методика Монтессори и создание прототипа приложения для карточек.
Course User interface — Lesson 7
- 2. Alex Lisovsky Co-Founder at ZZ Photo, UX/UI designer alexander.lisovsky@gmail.com facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky
- 6. http://getpocket.com/a/read/108156725 Время отличает интерактивный дизайн от других видов. Это оболочка наших понятий об интерактивности.
- 7. http://getpocket.com/a/read/108156725 Темп Интерактивный дизайн – это создание повествования. Повествование имеет темп. Мы ясно понимает это, когда смотрим кино. Если кино хорошее – мы никогда не смотрим на часы. Темп – это также часть интерактивного дизайна, поскольку иногда вы можете смотреть на часы вовсе не из-за скуки, а потому, что хотите понять – сможете ли вы вовремя завершить процесс «интерактивности».
- 9. Bad tutorial
- 10. http://getpocket.com/a/read/108156725 Реакция Простейший путь определения времени в интерактивном дизайне – «время реакции». Насколько долго система отвечает на событие? Это происходит, когда мы видим, как курсор превращается в песочные часы или в, ставший притчей во языцех, прогресс-бар, и мы ждем когда система нам ответить, но важны и другие времена реакции. Действие, совершающееся в реальном времени (синхронно), связано с текущим моментом, в то время как асинхронное действие теряет эту связь.
- 11. Progress bar
- 12. http://getpocket.com/a/read/108156725 Контекст Каждый базисный элемент, такой как время, должен иметь подэлемент – «контекст». Т.е. Для оценки времени необходимого пользователю на решение задачи Х, надо знать контекст решаемой задачи.
- 14. http://getpocket.com/a/read/108156725 Метафора – это литературный прием, при котором одно хорошо понимаемое явление или понятие используется для объяснения другого понятия, более трудного для понимания. Самый наглядный пример метафоры – иконка мусорного ведра. Но при этом метафоры лучше достигают цели, если они немного не точны, и пользователь сам должен заполнять пробел согласно собственному пониманию предмета. Так, например, мы адаптировали метафоры рабочего стола к нашим современным компьютерам.
- 16. http://getpocket.com/a/read/108156725 Абстракция Работая в тандеме с метафорой, абстракция соотносится больше с физической и ментальной активностью, которая исключительно необходима для того, чтобы интерактивность имела место. Например GoogleMaps. • Клик+перетаскивание = передвижение листа бумаги(карты) в фокусе луча света. • Скролл вверх = приближение • Скролл вниз = отдаление.
- 18. http://getpocket.com/a/read/108156725 Отрицательное пространство Все «правильные» дизайнерские дисциплины имеют понятие о форме отрицательного пространства. В графическом дизайне это «белое пространство» без цвета, линий или форм – как белые места на напечатанном листе бумаги. Дизайн звука использует тишину, дизайн света - темноту. Так что такое отрицание интерактивности? Есть много мест, где «что-то» может отсутствовать, или, говоря точнее, есть много слоев. Мы можем только говорить о действиях продукта? О наших действиях? О пространстве между частями действий?
- 20. http://getpocket.com/a/read/108156725 Пауза – Очень ясное понятие о времени, когда не совершается никаких действий, связанных с интерактивностью. Часто интерактивный дизайн пытается заполнить такие провалы, но может быть, эти провалы полезны. Остановиться и подумать – Что делать, если от системы нет реакции? Подумать, как сделал один студент Шведского института интерактивности и придумал «шар мысли». Если вы мало думаете, шар укатывается все дальше.
- 21. http://getpocket.com/a/read/108156725 Неактивность – Ничего не делать, продукт не реагирует на действие, может быть из-за его неправильности. Это не то, что пауза, так как в этом случае неактивность – это реакция на действие, а не остановка в действии. Смешивание в интерактивности В отличии от других, формообразующих дисциплин дизайна, интерактивный дизайн очень запутан, потому что требует других дисциплин, чтобы строить взаимодействия.
- 22. http://getpocket.com/a/read/108156725 1.Reimann, Robert. “So you want to be an Interaction Designer” 2.Saffer, Dan. “A Definition of Interaction Design” 3.Interaction Design Association. “What is Interaction Design?” 4.As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships, New York: Princeton Architectural Press, 2002. 5.Saffer, Dan. Designing for Interaction: Creating Smart Applications and Clever Devices, New Riders, 2007. 6.Cooper, Alan and Reimann, Robert, About Face 2.0, Indianapolis, IN, Wiley Publishing, Inc., 2003. 7.Lowgren, Jonas. “Pliability as an experiential quality: Exploring the aesthetics of interaction design,” Artifact 12:1 (April 10, 2006): 55–66. (republished on the author’s website) 8.Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM membership required)
- 23. Про «мусорное ведро» запомнил!
- 24. Навигация: ошибки и решения http://siliconrus.com/2014/09/website-navigation/
- 25. http://siliconrus.com/2014/09/website-navigation/ Пользователи получают информацию двумя основными способами — с помощью поиска и просмотра. Человеческий мозг устроен так, чтобы замечать вещи, которые чем-то выделяются из окружающей однообразности. Именно поэтому на копировальных машинах кнопка для начала печати всегда яркая и большая.
- 26. http://siliconrus.com/2014/09/website-navigation/ По этой же причине в интерфейсах смартфона используются иконки приложений, а не их текстовое описание. Пользователь, который хочет запустить приложение Moves, не ищет слово ‘Moves' — ему нужна зеленая иконка.
- 27. http://siliconrus.com/2014/09/website-navigation/ Приоритезация и визуальный язык Приоритезация заключается в придании визуальному элементу веса, соответствующего его важности. Для того, чтобы определить важность того или иного навигационного элемента, прежде всего необходимо изучить их связь с целями пользователя
- 28. http://siliconrus.com/2014/09/website-navigation/ Интерфейс приложения для управления проектами Harvest выделяет основные функции (отчеты и расписание), а второстепенные делает менее заметными («Профиль»)
- 29. http://siliconrus.com/2014/09/website-navigation/ Значение той или иной функции может доноситься до пользователя и с помощью визуальных элементов. Чаще всего данный эффект достигается благодаря применению иллюстраций и иконографики. Это помогает значительно облегчить работу с приложением или сайтом.
- 30. http://siliconrus.com/2014/09/website-navigation/ Ошибки в навигации: Craiglist Известный сайт-доска объявлений не лучшим образом использует и приоритезацию, и визуальный язык. Пользователям приходится читать весь контент.
- 31. http://siliconrus.com/2014/09/website-navigation/ Ошибки в навигации: Jimmy John's На сайте компании навигация также выполнена не лучшим образом. Каждый раз, когда пользователь хочет сделать заказ, ему приходится читать каждую надпись на странице.
- 32. http://siliconrus.com/2014/09/website-navigation/ Ошибки в навигации: Microsoft Metro UI В Metro UI от Microsoft, сочетание цветов в котором (белые буквы и иконки, однотонный фон) заставляет пользователей читать все надписи на экране.
- 33. http://siliconrus.com/2014/09/website-navigation/ Ошибки в навигации: iTunes iTunes разработчики отказались от цветовой дифференциации иконок в боковой панели, что привело к необходимости внимательно рассматривать элементы для поиска нужного.
- 34. http://siliconrus.com/2014/09/website-navigation/ Верные решения: Twitter Веб-интерфейс Twitter очень прост, в нем не так много кнопок, но каждой из них соответствует «говорящая» иконка. Для самого важного действия — создание нового твита — используется цветная иконка.
- 35. http://siliconrus.com/2014/09/website-navigation/ Верные решения: Instagram В приложении популярного фотосервиса реализованы и приоритезация, и визуальный язык — каждая кнопка в меню выполнена в виде понятной иконки, а самая важная из них — камера — расположена в центре и выделена с помощью синего фона.
- 36. Верные решения: EPB Fiber Optics На сайте компании в верхнем меню присутствует несколько уровней приоритета — главные элементы расположены на черном фоне, а главное действие — заказ подключения к сети — как и в случае Twitter и Instagram, выделено цветом. http://siliconrus.com/2014/09/website-navigation/
- 37. http://siliconrus.com/2014/09/website-navigation/ Советы: Необходимо думать о целях пользователя и конверсии При создании навигационных элементов необходимо ставить себя на место пользователя, который будет решать с помощью интерфейса те или иные свои задачи. Кроме того, не стоит забывать и о целях бизнеса, уделяя внимание повышению конверсии. Самые важные элементы для пользователя и бизнеса должны быть выделены на странице и интуитивно понятны.
- 38. http://siliconrus.com/2014/09/website-navigation/ Советы: Единообразие не всегда полезно Разработчикам сайтов и приложений стоит взять пример с создателей копировальной техники, которые не стесняются использовать большие зеленые кнопки, которые не особенно соотносятся с остальным интерфейсом устройства. Самые главные элементы должны быть выделены, а не «подогнаны» под оформление второстепенных элементов интерфейса.
- 39. http://siliconrus.com/2014/09/website-navigation/ Советы: Нужно использовать не только текст, но и визуальный язык Когда есть возможность подсказать пользователю более быстрый путь решения его задачи с помощью иконки, изображающей конкретное действие — необходимо её пользоваться.
- 40. ZZ Photo
- 41. http://siliconrus.com/2014/09/website-navigation/ Советы: Цвет и размер имеют значение Для выделения наиболее важных ссылок и кнопок необходимо использовать цвета, отличающиеся от остального контента. Кроме того, более заметными важные элементы можно сделать, увеличив их размер.
- 43. Мария Монтессори (1870 - 1952) — итальянский врач, педагог, учёный, философ, гуманистка. Одним из свидетельств международного признания Марии Монтессори стало решение ЮНЕСКО (1988), касающееся всего четырёх педагогов, определивших способ педагогического мышления в ХХ веке. Методика Монтессори основана на индивидуальном подходе педагога к каждому ребёнку: он постоянно сам выбирает дидактический материал и продолжительность занятий, развиваясь в собственном ритме и направлении.
- 44. Школа Монтессори
- 45. Карточки Монтессори Используются карточки, одинаковые по размеру, материалу и дизайну. Белый фон изолирует предмет от окружающей среды. Изменяются лишь картинки, обозначающие названия и цвет каймы, для различения по темам: растения, животные, предметы.
- 47. Практическое задание: Создаем прототип приложения карточек Монтессори. Функционал позволяет: - Просматривать карточки - Прослушивать произношения слов - Создавать/редактировать новые карточки
- 50. Alex Lisovsky Co-Founder at ZZ Photo UX/UI designer alexander.lisovsky@gmail.com facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky