Једноставан хацк за корисничко сучеље за побољшање УСБ-а [ОЦД]

УИ скице и скице претпостављају да су кориснички подаци већ присутни. На пример, модел испод подразумева да ће корисник имати контакте са којима ће моћи да разговара, обавештења, па чак и теме за ћаскање.

Једноставан мессенгер уи изграђен помоћу овог бесплатног ресурса скице

Али то никада није случај када се корисник пријави. У почетку нема података, па је празан ступац с контактима и празан прозор за ћаскање.

Сјајни дизајн корисничког сучеља олакшава конзумирање информација и не фокусира се на то како да их креирате.

То сам научио на тежи начин када сам натопио што више Дриббблеа како бих могао да дизајнирам инструментну таблу за б2б апликацију. Изгледало је сјајно на Скетцх-у, али наши купци нису успели да пронађу свој пут.

Лош УКС повећава трошкове укрцавања и подршке, што директно утиче на приходе. Такође је лоше гледати корисника како се труди да потроши ваш пиксел савршен дизајн. Подсећа вас да нисте успели.

Постојећа решења

Једно од решења било је постављање укрцаја уз коришћење слајдова попут интерфејса. Чини се да је ово стандард за мобилне апликације.

Слацк-ов УКС укрцај на клизачу

Проблем са приступом слајдова је недостатак контекста. На дијапозитивима можете пренијети само толико ствари (колико корисник задржава је другачије питање).

Одличан је за пружање прегледа производа, али није од велике користи приликом објашњавања како производ делује. За мој случај употребе било је ирелевантно, јер сложеност производа није могла свести на неколико слајдова.

Постојало је и алатно решење које корисника води кроз одређене кораке. Ова је опција популарнија код веб апликација. Постоји много добрих ЈаваСцрипт библиотека које вам помажу у изградњи ових токова.

Тоолтип заснован на укрцавању у демојс-у за интројс.цом/

Што се тиче решења заснованог на алатима, нашао сам их неугодних и готово увек кликнули на „водич за прескакање”. Иако велике компаније попут Цанва користе тоолтип базиран на укрцавању. Производ назван АппЦуес омогућава вам да дизајнирате ове савете без кода, уредно.

Такође постоји приступ стилу „беацон“, где су обично погрешно схваћене функције означене ужареним лампама, које пружају релевантне информације када је то потребно (ако су потребни).

Ово је најнеупадљивији начин. За разлику од алатке која гурне уџбеник у 17 корака низ грло и нестане када вам заправо затреба, овај приступ заснован на жаришној тачки пружа информације када сте спремни.

Вреди напоменути да Слацк користи сва три облика. Није ни чудо што се њихови корисници држе. Што такође наговештава да је задржавање директно пропорционално лакоћи укрцавања.

ОЦД ака централно дизајниран на броду

Волим именовати ствари. Имена помажу у стварању идеја у уму. Зато назовимо овај централни дизајн.

Желео сам решење које:

  • Био је релевантан за контекст
  • Није било неугодно (нико не воли да предузме 17 корака да би научио како игра делује)
  • Неупадљиво је (попут светила)
  • Лако је конзумирати (савети за алат нису лако конзумирати)

Исход

Једноставно сам почео да дизајнирам државе. Дизајн разговора који сте видели док сте почели да читате овај чланак може да се дизајнира са три стања.

Стање 1: Нема контаката

Држава 2: Контакти су присутни, али нема ћаскања

Стање 3: Присутни су и четови и контакти

Циљ сваке државе је прелазак корисника у следеће стање. Када корисник напредује до стања 3, успешно се укрцава. С обзиром на образац за цхат, циљ сваке државе је сљедећи:

Циљ државе 1: Главни корисник да дода контакт

Састав испод има само један позив на акцију, плави плус тастер који кориснику омогућава додавање новог контакта. Графика и текст натерају корисника да предузме ту акцију.

Стање 1 - Наведите корисника да додаје контакте (илустрација ундрав.цо)

Када је контакт додан, можемо започети други циљ.

Циљ државе 2: Главни корисник да започне цхат

На слици испод приказан је графички темељ за започињање ћаскања. Изричито су изложене доступне функције. Опет, постоји само једна ствар коју сада можете учинити, тј. Послати поруку. Такође можете да позивате у овом корисничком сучељу, али обе ове радње имају исту сврху. Они одводе вашег корисника на корак 3.

Држава 2 - контакт је додан, прво започните разговор

Циљ државе 3: Нема, корисник је укрцан - сви наговештаји би требали нестати

И коначно, када је ваш корисник поновио поступак неколико пута, њен интерфејс ће почети да изгледа онако како смо првобитно намеравали.

Стање 3 - Корисник је успешно укрцан

Предности овог приступа

  • У поређењу са приступом дијапозитива у кораку 1, Онбоардинг Центриц Десигн (ОЦД) представља садржај у комадима. Информације су доступне у тренутку доношења одлуке.
  • Овај приступ се може користити и на мобилним и на десктоп уређајима. Ово корисничко сучеље је једноставно, али у случају сложеног корисничког сучеља, можете користити ОЦД са врућим тачкама да бисте повисили ЦТА.
  • Овај приступ побољшава ваш УКС на првом месту, форсирајући вас да размишљате у погледу корисниковог пута.
  • Ако вам се деси да пишете предње странице помоћу Реацт-а, овај приступ се складно уклапа у њену компонентну архитектуру.

Као правило:

Дизајнирајте макете за државе.
Свака држава има један циљ - напредак ка наредној држави.
Последње стање је када се ваш корисник налази на броду.

Хвала за читање :)

Здраво, ако вам се овај чланак свидио и желите да будете у току, пратите ме на: Медиум, Гитхуб или Твиттер

Ја водим опуштену заједницу (која има 18 чланова од 6. октобра 2018. године) где можете помоћи другима или добити помоћ у вези с фронтом, повратним информацијама и развојем уопште. Можете му се придружити овде.