Oblikovanje uporabniškega vmesnika Kin Wallet

Projektne zahteve

Naš postopek načrtovanja se začne z določitvijo potreb po izdelkih. V tem primeru mora naš izdelek uporabnike Kik-a seznaniti s postopkom zaslužka in porabe Kina. To pomeni, da se bomo vkrcali na uporabnike do povsem nove izkušnje v podjetju Kik.

Med prejšnjo iteracijo tega izdelka (različica, ki je bila na voljo uporabnikom, ki so sodelovali v dogodku distribucije žetona), je bilo odločeno, da bo denarnica imela videz znamke Kin.

To pomeni, da bodo novi uporabniki Kik-a, ki gledajo ta izdelek, doživeli tako nove funkcije kot nov videz in občutek, ki se zelo razlikuje od tistega, ki so ga bili vajeni do zdaj.

Zaradi tega smo že zgodaj spoznali, da bo pomembno, da se ta različica ohrani čim bolj vitko.

Načrtovanje uporabniške strukture načrtovanja potovanj uporabnikov

Na vkrcanje

Uporabniki bodo denarnico spoznali prek bota @KikTeam. To nam omogoča, da izkoristimo to, kar uporabniki Kik-a poznajo - klepetajo -, da predstavimo to novo izkušnjo.

Informacijska arhitektura denarnice (IA) - pregled različnih struktur

Med dvema ponovitvama tega projekta smo preučili dve možni strukturi ocene učinka.

  1. Trden nabor funkcij, ki vključuje zgodovino transakcij in velik del načinov za zaslužek.
  2. Vitkejši sklop, ki vključuje samo možnosti ravnotežja in zaslužka / porabe.

Prva iteracija

Med zgodnjo iteracijo smo začeli z glavno stranjo, ki je bila uporabljena za denarnico udeleženca TDE, in dodali navigacijo po meniju za zaslužek in zgodovino transakcij. Poraba in uravnoteženost bi ostala na glavni strani, da bi zmanjšali obseg projekta in nadgradili tisto, kar je že bilo na voljo uporabnikom. Struktura menijev bi pomagala pri razvrščanju robustnih nizov funkcij, načrtovanih za to različico, v ločena območja, kar bi pomagalo pri določanju načina in zmanjšalo kognitivno obremenitev.

Za dve novi strani (zaslužek in zgodovino transakcij) smo preučili dva običajna oblikovalska vzorca:

  1. Časovna vrstica za zgodovino transakcij: Ta vzorec nam bo omogočil predstavitev informacij v kronološkem vrstnem redu, ki ustreza namenu te strani - prikazovanje prihodnjih in odhodnih transakcij v Kinu skozi čas. To je običajno za bančne aplikacije.
  2. Vsebinske kartice za zaslužek: Ta vzorec se pogosto uporablja pri izdelkih za porabo vsebine in e-trgovini, kar ustreza prostoru, v katerem bo Kin deloval.

Raziskali smo tudi z uporabo postavitve seznamov in velikih kartic:

Z oblikovanjem te različice smo komplet za uporabniški vmesnik razširili za blagovno znamko Kin in morali smo eksperimentirati z novimi slogi in vzorci uporabniškega vmesnika.

Druga ponovitev

Prehod na drugo iteracijo tega projekta (IPLv2) smo začeli z manjšim naborom funkcij. Iskali smo preprosto oblikovalsko rešitev, ki bi uporabnikom Kik-a na jasen način predstavila novo izkušnjo in bi bila lahko izvedljiva.

Ta različica denarnice bo preprosta, z samo eno stranjo in postavitvijo, z glavo in z zavihki, da boste razlikovali med dvema vrstama informacij:

  1. Kin ravnotežje in informacije o uporabniku.
  2. Dvostranska ponudba gospodarstva - priložnosti za zaslužek in porabo.

S pomočjo te strukture smo lahko ustvarili dve ravni hierarhije.

Modra glava bi uporabnike opozorila na stanje v Kinu, z imenom in fotografijo pa bi zagotovili, da je to njihov račun.

Področje zavihkov se lahko premika z lepljivo glavo, da se fokus preusmeri iz ravnotežja na ekonomičnost. Domnevali smo, da ko uporabniki preusmerijo pozornost s svojega ravnovesja na te zavihke, ne potrebujejo več podatkov o bilanci. Vendar bi moralo biti vedno na voljo preklapljanje med obema jezičkoma, saj obema zavihkoma dajemo enako raven hierarhije.

UI oblikovanje

Poglej in začuti

UI slog denarnice temelji na vodniku o slogu blagovne znamke Kin. Naš cilj je ustvariti videz in občutek, ki je hkrati zaupanja vreden in prijazen z uporabo modrih tonov, ikon linij in minimalnih ilustracij linij, s sklicevanjem na znanost in tehnologijo.

Iz vodila za slog Kin: Ilustracija junakov in točk, uporabe logotipa, barv in tipografijeUporabniški vmesnik denarnice

Animacije in prehodi na zaslonu

Uporabili smo dve vrsti animacije

  1. Prehodi, ki bodo posredovali povratne informacije o uporabniških dejanjih in ustvarili pričakovanja o prihodnjih dogodkih.
  2. Naredite napake in sistemske napake prijazne v skladu z našim ciljem, da ustvarite zaupanje in prijazen občutek.

Prehodi

Ko se uporabniki strinjajo s pogoji, traja nekaj sekund za nastavitev denarnice. To pomeni, da smo morali ustvariti nekakšno stanje nalaganja. Odločili smo se, da bomo to priložnost izkoristili za poudarjanje idej, ki stojijo za Kinom - decentralizacija in skupnost.

Z uporabo elementov iz logotipa (krogle iz okroglih oblik) smo ustvarili metaforo za posameznike, ki se gibljejo v svojem tempu in smeri, vendar se še vedno združujejo.

Mikro interakcije

Mikro interakcije smo poskušali čim bolj omejiti in jih uporabljamo le kot povratne informacije za uporabniške ukrepe.

Etuiji za robove

Primeri robov in stanja napak niso odlična izkušnja, vendar jih moramo upoštevati tudi pri zasnovi. Poskušali smo najti način, kako bi stanje napak izgledalo bolj prijazno.

Kaj je naslednje

Pridobivanje povratnih informacij uporabnikov!

Med delom na tem projektu smo imeli veliko vprašanj glede uporabnosti, prave postavitve za naše uporabnike in splošnih odgovorov na nov videz in občutek znotraj Kik-a.
Trenutno pripravljamo uporabniške delavnice, testiramo uporabnost in dobimo podatke za to različico, ko se bo začela.