Wärend enger vu menge Missiounen als UX / UI Designer, hunn ech mech verantwortlech fir e Perimeter vun enger scho reife Bankapplikatioun fonnt. Egal ob d'Funktionalitéit oder d'UI verbonne sinn, d'Reesen ware fortgeschratt a scho vill.

De System Design, genuch räich, diversifizéiert a strukturéiert, mécht et méiglech séier nei High-Fidelity Coursen ze prototypéieren ouni duerch Mid-Fi Wireframes ze goen. D'Ëmsetzung vun engem Systemdesign mécht et méiglech Entwécklungskäschte ze reduzéieren an déi allgemeng Konsistenz vum Produkt ze halen. Dës Konsistenz huet e wesentleche Virdeel fir de Benotzer, well et him erlaabt sech op vertraute Buedem ze fannen an visuell Mustere ganz einfach mat Funktionalitéit oder e Wee fir Informatioun ze associéieren.

Nëmmen dann, als Designer (Garant vun der Benotzererfarung) fanne mir séier datt mir eng Onmass Prototypen a Schiirme mussen kreéieren, verwalten an aktualiséieren, déi ganz ähnlech sinn, awer op verschidde Benotzungsfäll reagéieren. Navigéieren duerch d'Bildschirmer a Projeten amgaang ass dann eng richteg Erausfuerderung.

Mäin Zil duerch dësen Artikel a mat Iech d'Instrument ze deelen, dat mir erlaabt huet Uerdnung an dësem Wirbel vu Weeër ze setzen an eng global Visioun z'erhalen. D'Ëmsetzung vu Userflows huet mir déi néideg Hëllef fir d'Schafung, d'Aktualiséierung, d'Organisatioun an d'Kommunikatioun vun de verschiddene Weeër bannent den Teams ginn. An hei ass wéi ...

# 1 WIREFRAMES / PROTOTYPEN AN HÄR Aschränkungen

D'Wireframes erstellen a Prototyping hunn grouss an direkt Virdeeler. Si erlaben eis séier eis Schiirme ze testen an zimlech fréi am Projet. D'Zil vun engem Prototyp ass spezifesch Benotzungsfäll konkret ze maachen. Sou maachen se et méiglech d'Benotzererfarung ze liewen, si ginn e Mëttel fir Austausch während den Testphasen.

Wann Dir schonn an engem fortgeschrattene Stadium vun Ärem Design System sidd, kann High-Fidelity Prototype extrem séier sinn. Si sinn och wesentlech Tools fir e Client ze iwwerzeegen andeems hien him erlaabt selwer ze projizéieren.

Wéi mir uewe gesinn hunn, hunn Prototypen eng Schlësselroll am Benotzererfarungsdesign. Wéi och ëmmer, si erlaben, am Moment T, nëmmen e Bildschierm duerch Écran Visioun an am Kader definéiert vun eisem Gebrauch Fall ze hunn. Aus enger organisatorescher Siicht ass et schwéier d'Plaz vun engem bestëmmte Bildschierm an der Mëtt vum allgemenge Workflow ze verstoen. Virun allem, wéi mir méi déif an d'Entwécklung verdéiwen, gëtt d'Produkt méi komplex, mir mierken datt mir mat villen Szenarie këmmeren mussen, net ufanks berücksichtegt.

Tatsächlech representéieren déi produzéiert Prototypen allgemeng Nominalfäll an dacks den "Happy Wee", awer wat ass et mat deenen anere Fäll?

Zum Beispill :

• Wéi soll ech weisen datt e Knäppchen op verschidde Schiirme kann ofhängeg vum Status vum Benotzer bezeechnen?
• Soll ech dës zwou Versiounen prototypéieren fir d'Benotzererfarung vun dësen zwou Auswierkungen ze visualiséieren an ze testen?
• Wéi soll ech Feeler Fäll a meng Prototypen integréieren wéi Verloscht vun Verbindung, Server Problem? Soll ech en dedizéierten Prototyp maachen?
• Wéi kann ech d'Ausléiser fir dës Fehlermeldungen a mengem Prototyp vertrieden?
• Soll ech Versiounen erstellen no dem Status vun de Benotzer (Profil gespäichert / net gespäichert / Ageschriwwen / Net ageschriwwen)?
• Wann de Benotzer scho fir eng Feature ageschriwwen ass oder wann hien säin Abonnementprozess net ofgeschloss huet, muss ech verschidde Schrëtt iwwersprangen ofhängeg vun der Situatioun vun engem Benotzer?

D'Roll vun engem Designer ass all dës Fäll virauszegesinn an ergonomesch Léisungen ze bidden. Awer all dës verschidde Fäll sinn alternativ Szenarie, déi zesummen zu ganz vill Méiglechkeete féieren. Ass et méiglech Prototypen ze kreéieren fir op all dës Szenarie ze reagéieren? Unzehuelen datt d'Produkt e Budget an d'Zäit néideg ass fir d'Deklinatioun vun all dëse Schiirme, wéi eng Problemer kënnen d'Prototypen erhéijen?

• D'Schwieregkeet fir all dës Écranvarianten aktuell ze halen, besonnesch an engem séier evoluéierende Systemdesign.
• D'Schwieregkeet fir d'Auswierkunge ze evaluéieren, déi d'Ännerung vun engem Bildschierm op de Rescht vun de Coursen kann hunn, déi dësen Écran gemeinsam hunn.
• D'Zäit zougewisen fir Schiirme ze kreéieren, se z'organiséieren an se mat Entwéckler / POs ze deelen.
• D'Schwieregkeet fir en externe Lautsprecher fir sou vill Versiounen ze fannen.

Mir mierken datt d'Benotzung vu Prototypen als Kommunikatiouns- a Gestiounsinstrument net méi duer geet. Et kënnt zu enger gewësser Limit wa mir op all déi verschidde Fäll reagéiere wëllen.

Eng Makro Approche ze berücksichtegen wäert et méi einfach maachen dëst Labyrinth vu Méiglechkeeten ze navigéieren.

#2 DEN INTERESS VUN USERFLOWS

Wéi mir uewe gesinn hunn, wat méi komplex e System gëtt, dest méi schwéier ass et d'Produkt als Ganzt ze verstoen / z'organiséieren / erhalen duerch déi eenzeg Notzung vu Prototypen. Wou kënnt d'Nëtzlechkeet fir dëst Tool mat engem Userflow ze koppelen?

De Userflow mécht et méiglech d'Bewegungen duerch e System ze illustréieren, et weist wéi eng Schrëtt de Benotzer muss duerchgoën fir säin Zil z'erreechen. Nächst sinn den Niveau vun Detailer déi mir d'Benotzer Entscheedungen integréieren an d'Weeër, déi aus hinnen entstinn. Et ass och interessant déi technesch Aschränkungen z'integréieren déi entscheedend am Flow vum Produkt kënne sinn. Wann se zu der richteger Zäit a Projete benotzt ginn, kënnen Userflows souwuel d'Geschwindegkeet vun der Iteratiounsbildung erhéijen an d'Kommunikatioun am Produktteam verbesseren.

Just wéi Wireframes kënnen Userflows mat verschiddenen Detailniveauen presentéiert ginn :

• Wat méi rudimentär de Userflow ass, wat méi Är Approche fokusséiert op d'Schrëtt déi den Haaptbedürfnisser an Ziler vun de Benotzer entspriechen. Dësen Detailniveau ass ganz interessant well et eng allgemeng Iddi gëtt vun de verschiddenen Etappen an d'Zuel vun de Schiirme déi musse prototypéiert ginn. Dëst mécht et méiglech op d'global Funktioun zréckzekommen ouni op d'Detailer ze wunnen.
• Wat méi héich den Detailniveau ass, wat Dir méi endlech Elementer vun Interfaces, techneschen Elementer oder Benotzerentscheedungen integréiere kënnt. Wann Dir dësen Detailniveau erreecht hutt, kënnt Dir dann eng detailléiert Visioun vun de verschiddene Branchen hunn, wat Iech erlaabt d'Zil vum Benotzer z'erreechen.

Hei sinn e puer grouss Virdeeler vum Userflow ze benotzen :

• De Virdeel vun dësem Medium vun Ufank un am Design ze benotzen ass, d'Strecken op eng Makro Manéier ze "karteieren", awer virun allem fir se deementspriechend z'änneren. Et ass och interessant Äre Userflow als e liewegt an evoluéierend Aarbechtsinstrument ze gesinn. Et geet Hand an Hand mat techneschen Aschränkungen, Geschäftsentwécklungen a Benotzerbedürfnisser.
• Ëmgekéiert ass et schwéier verschidde Schiirme ouni d'Ënnerstëtzung vun dësem Tool z'entwéckelen, well mir net den Impakt realiséieren, deen dëst op aner Benotzungsfäll kann hunn, déi dësen Écran gemeinsam hunn. Tatsächlech, andeems Dir et benotzt, kënnt Dir d'Auswierkunge op ee Bléck gesinn an dofir all Schiirme déi méiglecherweis beaflosst sinn. Dëst mécht et méiglech, zum Beispill, dësen Écran z'entwéckelen andeems Dir all méiglech Szenarie berücksichtegt, sou datt Duplikatioun vermeit an d'Entwécklungskäschte reduzéiert. Op der anerer Säit, wann d'Benotzung ze ënnerschiddlech ass wéi de Benotzer oder d'Geschäft verlaangt, ass et méiglech ze deviéieren an eng nei Versioun mat voller Wëssen iwwer d'Fakten ze kreéieren.
• Op engem Prototyp ass et schwéier déi technesch Aschränkungen z'integréieren, déi e ganz staarken Impakt op d'endgülteg Benotzererfarung hunn: Waardezäit / Server Uriff / Sécherheetskontrollen. Kartéiere vun dëser Aart vun Informatioun kann scho gutt Hiweiser ginn iwwer wou potenziell Feeler oder Verspéidungen kënne ginn. Dëst mécht et méiglech, zum Beispill, "Shimmerings" ze bidden fir de Benotzer ze waarden oder Feelerfäll mat kontextuellen, humoristeschen oder liicht emotionalen Messagen ze preparéieren.
• Dëst mécht et och méiglech, déi verschidde Coursen op eng Macro Manéier fir déi verschidde Gespréichspartner vum Projet virzestellen. Zum Beispill ass et e Verméigen fir d'Dateteam dës Zort Representatioun ze hunn. Dëst erlaabt him déi verschidde Branchen a Benotzerdecisiounen ze visualiséieren an de "Tagging Plan" deementspriechend auszeschaffen.

#3 Beispill Tool:

An dësem Deel géif ech Iech gären de kollaborativen Userflow Creatiounsinstrument virstellen, deen ech besonnesch schätzen: Whimsical.

Déi meescht :

• Ufänken ass extrem einfach och fir een deen nach ni ähnlech Tools benotzt huet.
• Et ass ganz einfach en existente "komplexe" Userflow z'änneren ouni alles z'ënnerbriechen an ze vill Zäit drop ze verbréngen.
• D'Méiglechkeete vun der Personnalisatioun sinn net ganz vill, awer einfach, ästhetesch a gutt gemaach fir all d'Haaptbedürfnisser z'erreechen ouni an der Komplexitéit ze verléieren.
• Wëllt Dir den Aarbechts- a Kommunikatiounsprozess tëscht Entwéckler an Ärem Designteam erliichteren? Dir wäert fäeg sinn vun dësem Kollaboratiounsinstrument ze profitéieren, wat e puer Leit erlaabt un der selwechter Datei zur selwechter Zäit ze schaffen. Dir kënnt Kommentaren, Zesummenaarbechter op spezifesch Elementer vum Dokument taggen.
• Dëst Tool erlaabt Iech och Linken a Biller z'integréieren (Wéi Interfaces zu Userflows). Et ass awer bedauerlech datt et onméiglech ass.
• Dës Software integréiert och aner Tools déi net d'Thema vun dësem Artikel sinn, awer déi reell Verméigen bleiwen (Mindmap, Sticky Notes, Wireframe).
• De Präis ass raisonnabel: Gratis fir Rezensiounen an 10€/Mount fir Redaktoren.

Déi mannst :

• Ze schlecht kënne mir keng Virschau vun den Artboards vun Invision, Sketch oder Figma hunn, déi den Update vun engem echte Wireflow automatesch erlaben.
• Déi gratis Versioun bitt nëmmen ee kollaborativen Aarbechtsplang.

Bis muer fir nei Iwwerraschungen an eisem UX-Republic Adventskalenner!

Clement Guillot, UX-UI Designer @UX-Republic