UFMn

Willkommen in der Welt von UFMn.org, dem Ort für UX Design Enthusiasten. Meine Name ist Stefan Degen und ich habe eine Mission: Die UX Design Community von der Methode «Userflow Model and Notation» zu begeistern. Auf dieser Seite zeige ich dir, wie das UFMn deine Arbeit als UX Designer vereinfacht und verbessert. Also, los geht's!

Bleib in Kontakt

Die Notation von UFMn

Be­ginn eines UFMn

In der Welt des User­flow Model and No­ta­ti­on, kurz UFMn, spie­len so­ge­nann­te User­flows – ab­ge­kürzt als UF – die Haup­t­rol­le. Jedes die­ser UF be­ginnt seine Reise mit einer wohl­de­fi­nier­ten Per­so­na und einem kla­ren Start­sym­bol, legt den Grund­stein für eine Ge­schich­te, die sich durch die In­ter­ak­ti­on des Nut­zers mit der An­wen­dung ent­fal­tet.

Start­punkt und Vor­be­din­gun­gen

Bevor die Reise durch die di­gi­ta­len Land­schaf­ten be­ginnt, wer­den Vor­be­din­gun­gen fest­ge­legt, die den Aus­gangs­punkt und die Er­war­tun­gen an den User­flow klar de­fi­nie­ren. Von hier aus ent­fal­tet sich der Flow or­ga­nisch, wobei er von einem Mo­ckup zum nächs­ten fließt. Die­ser Pfad wird durch ver­schie­de­ne Arten von Aus­lö­sern ge­lei­tet – sei es ein ein­fa­cher Klick, eine in­tu­i­ti­ve Geste, ein prä­zi­se ge­tim­ter Timer, ein Scan­vor­gang oder eine di­rek­te Ta­s­ta­tur­ein­ga­be.

Struk­tur und Kla­r­heit durch Mo­ckups

Im Kern der UFMn-Me­tho­dik steht die Ver­wen­dung von Mo­ckups, die als bild­li­che Dar­stel­lun­gen der ein­zel­nen Bild­schir­me die­nen. Auf jedem die­ser Mo­ckups kön­nen, ana­log zu re­a­len An­wen­dungs­o­ber­flä­chen, meh­re­re Aus­lö­ser plat­ziert wer­den. Al­ler­dings ist es we­sent­lich, dass sich jeder UF auf das Ab­bil­den eines be­stimm­ten Sze­na­ri­os kon­zen­triert, um die Kla­r­heit und Ziel­ge­rich­tet­heit zu wah­ren. Es geht nicht darum, jedes denk­ba­re In­ter­ak­ti­ons­ele­ment zu er­fas­sen, son­dern die für das Sze­na­rio re­le­van­ten Wege auf­zu­zei­gen.

Na­vi­ga­ti­ons­flüs­se und Ver­bin­dun­gen

Eine Be­son­der­heit der User­flows in UFMn ist ihre Fle­xi­bi­li­tät im Hin­blick auf den Ab­schluss: Wäh­rend Pro­zess-ori­en­tier­te Flows ein de­fi­nier­tes Ende auf­wei­sen, kön­nen sol­che, die haupt­säch­lich der Dar­stel­lung der Na­vi­ga­ti­on die­nen, offen ge­stal­tet sein. Um die Über­sicht­lich­keit zu be­wah­ren und eine Über­frach­tung zu ver­mei­den, bie­tet UFMn die Mög­lich­keit, Ver­wei­se auf an­de­re User­flows und ex­ter­ne Do­ku­men­te zu in­te­grie­ren. Dies er­laubt eine Mo­du­la­ri­sie­rung und bes­se­re Hand­hab­bar­keit kom­ple­xer Nut­ze­rer­leb­nis­se.

Per­so­na zen­triert und De­tail­lie­rungs­grad

In der Regel kon­zen­triert sich ein UF auf die Er­leb­nis­welt einer ein­zi­gen Per­so­na. Es gibt je­doch Fälle, in denen ein Wech­sel zwi­schen Per­so­nas, wie etwa in einem Chat-Sze­na­rio, sinn­voll und not­wen­dig ist. Vor dem Zeich­nen eines UF muss sich der De­si­g­ner sorg­fäl­tig über­le­gen, wel­ches Nut­ze­rer­leb­nis dar­ge­stellt wer­den soll und wie um­fang­reich die­ses sein muss. Für grö­ße­re An­wen­dun­gen ist es oft rat­sam, die Er­zäh­lung auf meh­re­re User­flows auf­zu­tei­len, um die Kla­r­heit zu ma­xi­mie­ren.

Kenn­zeich­nung und Ent­wick­lungs­stand

Eine klare Kenn­zeich­nung jedes UF mit An­ga­ben zum ak­tu­el­len Ent­wick­lungs­stand – sei es «In Ar­beit», «Be­reit für den Re­view», «Be­reit für den Test» oder «Be­reit für die Um­set­zung» – er­leich­tert das Pro­jekt­ma­na­ge­ment er­heb­lich. Diese sys­te­ma­ti­sche Vor­ge­hens­wei­se ver­bes­sert die Trans­pa­renz in­ner­halb des Pro­jekts und er­leich­tert die Kom­mu­ni­ka­ti­on zwi­schen allen Be­tei­lig­ten, indem sie auf einen Blick den Sta­tus und den Aus­a­r­bei­tungs­grad jedes User­flows of­fen­legt.

Die UFMn 3.0 Sym­bo­le

Die Be­stand­tei­le des UFMn glie­dern sich in:

  • Flow Ob­jects – die Kno­ten (Ac­ti­vi­ty, Gate­way, Event und Tran­si­ti­ons) in den User­flow
  • Connec­ting Ob­jects – die ver­bin­den­den Li­ni­en der User­flows
  • Pools und Swim­la­nes – die Be­rei­che, mit denen Sub­pro­zes­se oder wei­te­re Ak­teu­re ab­ge­grenzt wer­den
  • Hel­pers – wei­te­re Ele­men­te wie No­ti­zen, Links zu ex­ter­nen Ar­te­fak­ten, Spe­zi­fi­ka­ti­ons-An­no­ta­ti­o­nen

Nor­ma­le­r­wei­se ver­läuft die Dar­stel­lung ho­ri­zon­tal von links nach rechts, ähn­lich der Zeit­leis­te in phy­si­ka­li­schen Dia­gram­men. Schlei­fen, Wie­der­ho­lun­gen oder Re­vi­si­o­nen in­ner­halb des Flows wer­den durch ent­spre­chen­de Rü­ck­ver­bin­dun­gen zum vor­he­ri­gen Punkt der Pro­zess­ket­te ge­kenn­zeich­net.

Flow Ob­jects

Sequenzstart

Se­quenz­start

Das Star­ter­eig­nis löst den Se­quenz­fluss eines Pro­zes­ses aus.

Sequenzstopp

Se­quenz­stopp

Ender­eig­nis­se be­en­den den Se­quenz­fluss.

Einfacher Klick

Ein­fa­cher Mausklick oder Tap

Gesten

Ges­ten

Ges­ten wie Swipe nach links, rechts, oben, unten, Zwei­fin­ger-Tap, Dop­pel-Tap, Pinch und wei­te­re.

scannen

Scan­nen

Se­quenz sta­r­tet nach dem scan­nen eine QR oder EAN-Codes. Die­ser kann so­wohl über die Ka­me­ra (Soft-Scan­ner) wie auch über ein ex­ter­nes De­vice er­fol­gen.

timer

Timer

Se­quenz star­tet nach Ver­strei­chen einer fest­ge­leg­ten Zeit oder so­bald ein spe­zi­fi­sches Er­eig­nis ein­tritt.

keystroke

Tas­te­n­an­schlag

Se­quenz sta­r­tet nach einem Tas­te­n­an­schlag oder nach einer Ein­ga­be per Ta­s­ta­tur.

Spracheingabe

Sprach­ein­ga­be

Se­quenz sta­r­tet nach einer Sprach­ein­ga­be oder nach einem Ge­räusch.

Exklusives Gateway

Ex­klu­si­ves Gate­way

Ex­klu­si­ve Gate­ways kom­men zum Ein­satz, wenn le­dig­lich ein ein­zi­ger Pro­zess­pfad ge­wählt wer­den darf (ent­we­der "und" oder "oder" in Bezug auf Pfa­d­op­ti­o­nen). Bei der Kon­ver­genz der Pfade ist es er­for­der­lich, dass alle vor­her in­iti­ier­ten Wege ab­ge­schlos­sen wer­den.

Paralleles Gateway

Par­al­le­les Gate­way

Par­al­le­le Gate­ways er­for­dern, dass alle sich ver­zwei­gen­den Pro­zess­pfa­de gleich­zei­tig be­a­r­bei­tet wer­den („und“-Be­din­gung). Der Pro­zess­fluss kann erst wei­ter­ge­führt wer­den, wenn alle zu­sam­men­lau­fen­den Pfade bei der Kon­ver­genz voll­stän­dig ab­ge­schlos­sen sind.

Inklusives Gateway

In­klu­si­ves Gate­way

In­klu­si­ve Gate­ways kom­men zum Ein­satz, so­bald die Mög­lich­keit be­steht, einem oder meh­re­ren Pro­zess­pfa­den zu fol­gen (Kom­bi­na­ti­on aus „und/oder“-Be­din­gun­gen). Beim Zu­sam­men­lau­fen der Pfade ist es not­wen­dig, das Ein­tref­fen aller vorab in­iti­ier­ten Wege ab­zu­war­ten.

Neutral Gateway

Neu­tral Gate­way

Kom­men zum Ein­satz, wenn Se­quen­zen er­neut zu ver­ei­nen.

Abkürzung

Ab­kür­zung

Wenn sich ein Vor­gang in einem User­flow wie­der­holt, lässt sich eine Ab­kür­zung ver­wen­den. Diese dient dazu, den Flow zu straf­fen und un­ter­schei­det sich von einer tech­nisch be­ding­ten Schlei­fe.

Navigations Gateway

Na­vi­ga­ti­ons Gate­way

Das Na­vi­ga­ti­ons-Gate­way wird ver­wen­det, um die Funk­ti­ons­wei­se einer Haupt- oder Sub­na­vi­ga­ti­on zu ver­deut­li­chen. So wer­den un­nö­ti­ge Se­quenz­flüs­se ver­mie­den um die Les­bar­keit des Flows ein­fach zu hal­ten.

Page Transition Fade

Page Tran­si­ti­on

Bei Sei­ten Ani­ma­ti­o­nen wird der Se­quenz­fluss mit einer Tran­si­ti­on-An­wei­sung er­gänzt. Fol­gen­de Ani­ma­ti­o­nen ste­hen zur Aus­wahl: Faden, Pop, Slide IN, Slide OUT, Flip



Connec­ting Ob­jects

sequenzflow

Se­quence Flows

Se­quenz­flüs­se (Se­quence Flows) stel­len die Ver­bin­dung zwi­schen Ak­ti­vi­tä­ten,Events und Gate­ways in einem Pro­zess her und il­lus­trie­ren da­durch die zeit­lich-lo­gi­sche Rei­hen­fol­ge des Ab­laufs.

Message Flow

Mes­sage Flow

Ein Mes­sage Flow si­gna­li­siert, dass Nach­rich­ten im Hin­ter­grund über­mit­telt oder Ak­ti­vi­tä­ten in­iti­iert wer­den.

Infoline

In­fo­li­ne

An­mer­kun­gen wer­den in der Regel au­ßer­halb eines Mo­ckups prä­sen­tiert. Die Ver­bin­dung zwi­schen der An­mer­kung und dem spe­zi­fi­schen Ele­ment wird durch die Ver­wen­dung einer In­fo­li­ne her­ge­stellt.



Pools, Swim­la­­nes und Links

Referenz

Re­fe­renz

Sub- oder De­tail­pro­zes­se las­sen sich in einem se­pa­ra­ten User­flow oder einem Pool ab­bil­den. Die Re­fe­renz-Karte dient dabei als Ver­weis auf einen Sub­pro­zess und mar­kiert den je­wei­li­gen Ein­stiegs­punkt. Es ist emp­feh­lens­wert, diese Kar­ten un­ter­ein­an­der zu ver­knüp­fen.

Referenz zu Prototype

Re­fe­renz zu Pro­to­ty­pe

Zeigt auf Pro­to­ty­pen. Die Karte muss mit dem ent­spre­chen­den Pro­to­typ ver­bun­den wer­den. Das Sym­bol gibt Aus­kunft über die ge­nutz­te Pro­to­ty­ping-Soft­ware.

Referenz zu externen Dokumente

Re­fe­renz zu ex­ter­nen Do­ku­men­te

Rich­tet den Fokus auf ex­ter­ne Do­ku­men­ta­ti­on, zum Bei­spiel Test­skrip­te. Die Karte muss mit dem zu­ge­hö­ri­gen Do­ku­ment ver­knüpft wer­den. Das Sym­bol iden­ti­fi­ziert die ver­wen­de­te Pro­to­ty­ping-Soft­ware.

Link zur Problemverfolgung

Link zur Pro­blem­ver­fol­gung

Ver­weist auf ein Issue-Tracking-Pro­blem, mit dem die Karte ver­knüpft ist (ma­nu­ell zu er­stel­len). Das Sym­bol zeigt zu­sätz­lich die Issue-Tracking-Platt­form des Issue an (z. B. JIRA).

Allgemeiner Link zu einer beliebigen Ressource

All­ge­mei­ner Link zu einer be­lie­bi­gen Res­sour­ce

Ver­weist auf eine be­lie­bi­ge Res­sour­ce, mit der die Karte ver­knüpft ist (muss ma­nu­ell er­fol­gen). Das Sym­bol kann auf Stan­dard ein­ge­stellt wer­den oder das Werk­zeug der Res­sour­ce zei­gen.



Hel­pers

clickarea

Clicka­re­as

Zeigt an wie gross die In­­ter­ak­ti­­ve Flä­che tat­­säch­­lich ist. Z.B. stimmt die Grös­­se eines But­ton nicht immer mit der klick­­ba­ren Flä­che über­­ein.

Sequenznotizen

Se­quenz­no­ti­zen

Be­schrei­bung was in der Se­quenz-Ele­ment ge­schieht.

Zusatznotizen

Zu­satz­no­ti­zen

Zu­satz­be­schrei­bung zu einer UI-Kom­po­nen­te.

Fragennotizen

Fra­gen

Fra­gen und No­ti­zen zu einem be­stimm­ten Teil des User­flows.



Ver­mas­sung

specs Lines

Ver­mas­sung mit Li­ni­en

Zur An­ga­be von Ab­stän­den, Brei­ten- oder Hö­hen­an­ga­ben.

Spec mit Pfeilen

Ver­mas­sung mit Pfei­len

Zur An­ga­be von Ab­stän­den, Brei­ten- oder Hö­hen­an­ga­ben.

Annotation

An­mer­kun­gen

Be­reit­stel­lung von (Kom­po­nen­ten-) Ele­ment­be­schrif­tun­gen