Hogyan segítheti az állapotdiagram a tervezőket?

Az állapotdiagram (vagy állapot-átmenet diagram vagy állapotmodell) úgy hangzik, mint egy mérnöki hívószó a 80-as évekből, de ez egy nagyon hatékony eszköz, amelyet az UX/UI tervezők használhatnak projektjeik során. Egy UX/UI tervezési projektben, ahol az UX az utazásra összpontosít, az UI valójában az állapotokra és az állapotátmenetekre összpontosít. Az állapotdiagram meglehetősen rugalmas, igény szerint alakíthatja. Bónusz: a fejlesztők könnyen megérthetik. Lássuk, mi ez, és hogyan használhatod. (felhasználói élmény és felhasználói felület) (felhasználói élmény) (felhasználói felület)

Mi az állapotdiagram?

Az állapotdiagram egy reprezentációs eszköz, „amelyet egy rendszeren belüli entitás különböző lehetséges állapotainak leírására és elemzésére használnak” (Business analyst know-how, v3, 2015). Az entitás bármely objektum lehet a rendszeren belül, attól függően, hogy milyen rendszert tervez vagy elemez. Egy tervezési rendszerben az entitás már nagyon jól definiált: komponensnek nevezzük, pl. egy szín, egy gomb, egy fejléc, egy táblázat, egy oldal.

Az állapot a felhasználói felület kialakításában is ismert definíció: például egy gombnak lehet lenyomott állapota és alapértelmezett állapota. Nem minden összetevőnek van különböző állapota, általában egy elsődleges színnek nincs állapota, de az ezt az elsődleges színt használó összetevőknek lehetnek. Ezeknek az entitásoknak lehetnek olyan állapotai, amelyek „megcsinálnak” valamit maguktól vagy egy felhasználói művelet eredményeként. A webáruházban a kosár lehet üres vagy nem üres, egy űrlap mezője lehet aktív vagy inaktív, stb. Az összetettebb összetevőknek is lehetnek állapotai: egy keresési eredménylista lehet üres, és ebben az állapotban másképp viselkedhet, mint amikor találatok vannak a listában.

Egy komponens, amelynek több állapota is lehet, előre meghatározott sorrendben haladhat át ezeken az állapotokon, és a legtöbb esetben az egyik állapotból a másik állapotba való átlépés bizonyos szabályokat követ. Például. webáruházban az üres kosárba nem lehet „kifizetett” állapot, először tartalmaznia kell valamit. Egy inaktív gombnak nem lehet lenyomott állapota, először aktívnak kell lennie. Tehát ha egy komponensnek több állapota van, nem minden átmenet (egyik állapotból a másikba) érvényes.

Az állapotdiagramban négyzeteket használunk az állapotok, a nyilakat pedig az érvényes állapotátmenetek ábrázolására. Az állapotdiagramok a tevékenységdiagramok egyfajta kiegészítő módszerei: a tevékenységdiagramon a dobozok a tevékenységeket (átmeneteket), a nyilak pedig az állapotokat mutatják.

Lássunk egy példát. A tervezést egy gyógyszeripari cég dokumentumkezelő rendszer bevezetési projektjében végeztük. Ebben a rendszerben a dokumentum a következő állapotokkal rendelkezhet:

• Szerkesztés: attól kezdve, hogy a felhasználó létrehozta a dokumentumot, szerkesztheti azt. Amíg a dokumentum tulajdonosa jóváhagyásra el nem küldi, addig szerkesztés alatt állónak tekintjük.
• Jóváhagyásra vár: Ebben az állapotban a dokumentum nem szerkeszthető, és a vezetők hagyhatják jóvá vagy elutasíthatják azt. A jóváhagyás után a jóváhagyási fázisba lép. Az elutasítás után visszatér a szerkesztéshez.
• Jóváhagyva, aláírásra vár: Amikor minden jóváhagyó jóváhagyta a dokumentumot, egy másik vezetői szint kerül aláírásra. Az aláírók továbbra is elutasíthatják, majd visszatér a szerkesztéshez. Vagy összegyűjtik az összes aláírást, majd aláírt állapotba kerül.
• Aláírva: Minden aláíró aláírta, a dokumentum a dokumentum jellegétől függően házon belül terjeszthető vagy visszaküldhető az eladónak. Nem szerkeszthető tovább, ez egy „végleges” verzió.
• Érvénytelen: Előfordulhat, hogy ugyanannak a dokumentumnak az új verziója megkapja az összes aláírást (pl. képzeljünk el egy belső ünnepi szabályzatot), a dokumentum korábbi verziója érvénytelen lesz.

Nézzük meg, hogyan néznek ki ezek a lépések egy állapotdiagramon:

Hogyan használhatunk állapotdiagramot?

Bármely ábrázolási módszer csak ajánlás. Igényeinkhez igazíthatjuk őket. Egyetlen tanár sem áll mögötted, hogy ellenőrizze, mennyire pontosan használod az állapotdiagramot. Az üzleti elemzők szeretik szabványosítani eszközeiket, de pusztán azért, mert létezik hivatalos helyesírási könyv az Ön nyelvén, nem jelenti azt, hogy ne fejezhetnénk ki magunkat másképp. Mutatom, mire gondolok.

A fenti formátumú állapotdiagram elsőre praktikusnak tűnhet, de nehéz további információkat hozzáadni hozzá. Tehát először tegyük egydimenzióssá, simítsuk ki. Ez azt jelenti, hogy az állapotok egy sorban lesznek – ez túl sok nyilat eredményezhet körülöttük, de ez a kompromisszum ára.

Most újabb dimenziót adhatunk a diagramunkhoz, így mátrix lesz belőle. Azt javaslom, hogy a másik dimenzióba vegyük fel a komponenseket, így meg tudjuk mutatni, hogyan néznek ki az egyes komponensek az egyes állapotokban. Egyszerűen hozzáadhat egy leírást, vagy hozzáadhatja a grafikus változatokat a mátrixhoz, attól függ, mi a könnyebben érthető és létrehozható. Azt javaslom, hogy erre a mátrixra csak azokat a komponenseket helyezze el, amelyek állapot szerint változnak, és ne tegyen bele minden komponenst a mátrixba, nehogy túl nagy és használhatatlan legyen.

A többi dimenzióba is hozzáadhatunk funkcionalitást, és megmutathatjuk, hogy az egyes állapotokban melyik felhasználói csoport rendelkezik jogosultsággal a funkciók elérésére.

Így kapunk egy felhasználói jogosultsági mátrixot, és a fejlesztők rendkívül boldogok lesznek. Ennek a felhasználói jogok vs. állapotmátrixnak egy másik előnye, hogy nincs lefedetlen eset, mivel a mátrix minden funkciót és állapotot tartalmaz (és a mátrix összes celláját kitöltöttük), nem lehet olyan speciális eset, amelyre nem gondoltunk.

Jó hír, hogy az előző két mátrix is ​​kombinálható: az állapotok, a fő komponensek és a jogosultságok mind egy mátrixra tehetők.

Hogyan segíti az állapotdiagram a tervezést?

Úgy gondolom, hogy az állapotdiagramok a felhasználói felület tervezési folyamatának természetes eszközei. Az UX-ben az ügyfélútra összpontosítunk, amely tevékenység-orientált megközelítés. Attól a ponttól kezdve, hogy meg kell terveznünk a végső képernyőket, gondolkodásmódunkat állapotorientált megközelítésre kell váltanunk, fel kell építeni a felhasználói felület összetevőit, és meg kell határoznunk, hogy az egyes képernyőknek hogyan kell viselkedniük. Az emberek folyamatokat végeznek, a képernyőknek állapotai vannak. Ha már definiáltuk az utakat és a képernyő-folyamatokat, meg kell határoznunk ezen összetevők állapotát. Egyes esetekben ezek az állapotok triviálisak (egy gomb aktív vagy inaktív állapota), de összetettebb komponensek vagy bonyolultabb folyamatok esetén ezek az állapotok korántsem triviálisak. Tehát szüksége van egy jó eszközre ezen állapotok összegyűjtéséhez, leírásához és ábrázolásához: ez az állapotdiagram. (felhasználói élmény)

Az állapotdiagram egyben minőségellenőrző eszköz is: miután azonosította a fő komponensek összes lehetséges állapotát, látni fogja, hogy a kisebb komponensek összes állapotára gondolt-e. Az állapotdiagram ebben a megközelítésben egy kettős ellenőrzési eszköz, egy keret, amelyet ki kell tölteni.

Az állapotdiagram segíti a fejlesztőkkel való kommunikációt is, mivel általában megpróbálják megtalálni a hiányosságokat a folyamatorientált tervezésben. Miután meghatározta az összes állapotot, és az összes összetevőt minden állapotban meghatározza: nincs hézag, és a fejlesztő boldog, ami a siker fele.