Как правильно проектировать интерфейс/сайт/лендинг

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

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

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

customer development

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

Проектирование, основанное на персонаже

portraits_compiled_small_by_dustsplat-d6lqvfi

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

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


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

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

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

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

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

Как создать персонажа?

__cloning_power___by_misslaurelle-d6lpkhl


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

Сперва необходимо провести серию интервью со всеми ответственными сторонами. Такими сторонами могут быть:

  • директора
  • менеджеры
  • консультанты
  • продавцы
  • итд


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

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

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

Теперь дело за картой эмпатии (Empathy Map). Она необходима для формирования полноценного образа каждого персонажа и выглядит примерно вот так:



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

Чек-лист персонажа

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

  • Имя
  • Пол
  • Возраст
  • Профессия
  • Средний доход / источник дохода
  • Время суток, когда он взаимодействует с продуктом
  • Ожидания
  • Предыдущий опыт взаимодействия с продуктом/аналогом/конкурентом

Например, если вы проектируете сервис заказа пицца, то одним из персонажей должен быть студент Арсений, который заказывает пиццу домой к себе домой, чтобы покушать вместе с друзьями. Ему 19 лет (потому что он отслужил в армии), сейчас учится на программиста, использует андроид, пиццу заказывает он после 21:00 и до этого ему всегда привозили пиццу не менее, чем за час. Для заказа он позвонил по телефону на сайте.

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

Что со всем этим делать?

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

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

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

 

 

Kirill

 

445 thoughts on “Как правильно проектировать интерфейс/сайт/лендинг

  1. Pingback: yacht rental miami
  2. Pingback: canadian pharmacy
  3. Pingback: canada drugs
  4. Pingback: site
  5. Pingback: cialis from canada
  6. Pingback: rftrip.ru
  7. Pingback: Men's Dress Shirts
  8. Pingback: dolpsy.ru
  9. Pingback: vnhoi
  10. Pingback: vnhoi
  11. Pingback: logarkomx
  12. Pingback: kin0shki.ru
  13. Pingback: stromectol tablets
  14. Pingback: 3o9cpydyue4s8.ru
  15. Pingback: Bahiscom
  16. Pingback: Betmatik
  17. Pingback: Betist
  18. Pingback: Cratosslot
  19. Pingback: Betlike
  20. Pingback: Betebet
  21. Pingback: Mariobet
  22. Pingback: Tempobet
  23. Pingback: Tipobet
  24. Pingback: Klasbahis
  25. Pingback: Vdcasino
  26. Pingback: Casinoeuro
  27. Pingback: imajbet
  28. Pingback: imajbet giris
  29. Pingback: Sahabet
  30. Pingback: ivermectin tablets
  31. Pingback: mb588.ru
  32. Pingback: stromectol pills
  33. Pingback: 1xbet
  34. Pingback: Bahigo
  35. Pingback: Bahis siteleri
  36. Pingback: Onwin
  37. Pingback: Kralbet
  38. Pingback: Tipobet Giriş
  39. Pingback: Betkolik
  40. Pingback: Casino Siteleri
  41. Pingback: Bettilt
  42. Pingback: Betasus
  43. Pingback: newsukraine.ru
  44. Pingback: Dinamobet
  45. Pingback: Jojobet
  46. Pingback: Autoapprove List
  47. Pingback: Jojobet giriş
  48. Pingback: Hepsibahis
  49. Pingback: Marsbahis
  50. Pingback: firemansuperhero
  51. Pingback: future university
  52. Pingback: edu-design.ru
  53. Pingback: tftl.ru
  54. Pingback: canadian drug
  55. Pingback: stromectol scabies
  56. Pingback: stromectol sale
  57. Pingback: brutv
  58. Pingback: Local Moving
  59. Pingback: site 2023
  60. Pingback: GLOCK 17
  61. Pingback: GLOCK 48 For Sale
  62. Pingback: Barrett M82A1
  63. Pingback: Cousin Pat
  64. Pingback: Cousin Pat Therapy
  65. Pingback: drugstore online
  66. Pingback: smed
  67. Pingback: viagra canada
  68. Pingback: FUE
  69. Pingback: FUE
  70. Pingback: FUE
  71. Pingback: FUE
  72. Pingback: canadadrugs
  73. Pingback: drugs for sale
  74. Pingback: sitestats01
  75. Pingback: 1c789.ru
  76. Pingback: cttdu.ru
  77. Pingback: machining parts
  78. Pingback: Health Guide
  79. Pingback: Health Guide
  80. Pingback: Health Guide
  81. Pingback: 1703
  82. Pingback: hdserial2023.ru
  83. Pingback: Healthcare tips
  84. Pingback: serialhd2023.ru
  85. Pingback: canadian drug
  86. Pingback: matchonline2022.ru
  87. Pingback: jeremiah robles
  88. Pingback: bit.ly/3OEzOZR
  89. Pingback: bit.ly/3gGFqGq
  90. Pingback: bit.ly/3ARFdXA
  91. Pingback: bit.ly/3ig2UT5
  92. Pingback: bit.ly/3GQNK0J
  93. Pingback: video
  94. Pingback: bep5w0Df
  95. Pingback: canada rx
  96. Pingback: www
  97. Pingback: onOverseas
  98. Pingback: onOverseas
  99. Pingback: icf
  100. Pingback: 24hours-news
  101. Pingback: rusnewsweek
  102. Pingback: uluro-ado
  103. Pingback: onOverseas
  104. Pingback: onOverseas
  105. Pingback: onOverseas
  106. Pingback: onOverseas
  107. Pingback: onOverseas
  108. Pingback: onOverseas
  109. Pingback: onOverseas
  110. Pingback: onOverseas
  111. Pingback: onOverseas
  112. Pingback: onOverseas
  113. Pingback: onOverseas
  114. Pingback: onOverseas
  115. Pingback: onOverseas
  116. Pingback: onOverseas
  117. Pingback: onOverseas
  118. Pingback: onOverseas
  119. Pingback: onOverseas
  120. Pingback: onOverseas
  121. Pingback: irannews.ru
  122. Pingback: klondayk2022
  123. Pingback: gravatar.comkqwsh
  124. Pingback: canada rx
  125. Pingback: tqmFEB3B
  126. Pingback: canadian rx
  127. Pingback: Innovation Center
  128. Pingback: 2022-film
  129. Pingback: fue
  130. Pingback: fue
  131. Pingback: future university
  132. Pingback: future university
  133. Pingback: drugstore online
  134. Pingback: future university
  135. Pingback: fue
  136. Pingback: future university
  137. Pingback: Pencil Packing Job
  138. Pingback: fue
  139. Pingback: future university
  140. Pingback: exipure buy
  141. Pingback: future university
  142. Pingback: parcours ninja
  143. Pingback: cage ocr
  144. Pingback: parcours ninja
  145. Pingback: barre olympique
  146. Pingback: leg press
  147. Pingback: callisthénique
  148. Pingback: bench musculation
  149. Pingback: training line
  150. Pingback: mangalib
  151. Pingback: Northwest Pharmacy
  152. Pingback: Lila Lovely
  153. Pingback: study skills
  154. Pingback: buy-domains
  155. Pingback: sex
  156. Pingback: Locked Out
  157. Pingback: foot cream
  158. Pingback: valentine pillow
  159. Pingback: x
  160. Pingback: 9xflix
  161. Pingback: xnxx
  162. Pingback: 24 hour Locksmith
  163. Pingback: 123movies
  164. Pingback: Hero Wars 2023
  165. Pingback: اوپسی
  166. Pingback: Locksmith Jesmond
  167. Pingback: Click Here
  168. Pingback: Click Here
  169. Pingback: Click Here
  170. Pingback: Click Here
  171. Pingback: Big Farm gameplay
  172. Pingback: 바카라사이트
  173. Pingback: Click Here
  174. Pingback: allure beauty box
  175. Pingback: allure beauty box

Comments are closed.