Firwat UX Designmuster funktionnéieren a wéi se se benotzen

Inhalt

• Wéi Benotzer mat Designmuster interagéieren
• Geléiert Verhalen
• Universal Design Konventiounen
• 01. Gestalt
• 02. Proximitéit
• 03. Faarf
• 04. Empathie op UI Designmuster uwenden
• Fazit

D'Web ass scho méi wéi 20 Joer a gëtt eis genuch Zäit fir Benotzererfarungsprobleemer ze entdecken - tatsächlech fir "Benotzererfarung" iwwerhaapt z'entdecken - a Léisungen ze erfannen.

E puer Léisunge funktionnéieren esou gutt datt Designer iwwerall ugefaang hunn se ëmmer erëm ze benotzen. An duerch Vertrautheet hunn d'Benotzer se erwaart. Dëst war den Ufank vu Webdesignmuster: eng gemeinsam visuell Sprooch déi Designer an Endbenutzer verstoen.

Et war net schwéier ze maachen. D'Leit sinn haart verbonne Mustere ze erkennen, och do wou et keng gëtt.

Formen a Wolleken, Zuelen a Lotterie Ticketen, viraussiichtlech Börsschwankungen, Stärekonstellatiounen a Gesiichter op Toast weisen alles wéi d'Leit Saache gesinn déi et net ginn. Fuerschung weist datt d'Leit no Bezéiungen tëscht Wäerter sichen, a Mustere verstäerken dës Bezéiungen.

UX Designer kënne ganz einfach vun de Benotzer Muster-Sich Tendenze profitéieren. Wéi navigéieren d'Leit op ville Säiten? Wéi weisen mir datt wann e klickt e Video ufänkt ze spillen?

D'Äntwert läit an Designmuster, déi wiederverwendbar Léisunge fir Usabilityprobleemer sinn. Si sinn och Zäitspuerer. Mustere sinn déi éischt Léisungen, op déi d'Leit goen, wa se keng Zäit hunn eppes Neies ze erfannen. A wéi vill "et funktionnéiert just" Léisungen, Mustere sti fest.

An dësem Post erkläre mir d'Psychologie an d'Techniken fir erfollegräich UI Musteren.

Wéi Benotzer mat Designmuster interagéieren

Éischt Andréck si kritesch well d'Benotzer wësse bannent 10-20 Sekonnen wa se Äre Site verloossen. Mustere kommunizéieren d'Funktioun an d'Intent sou kloer wéi méiglech an där Fënster vun der Geleeënheet.

Hei ass wéi et funktionnéiert. Loosst eis soen datt e Benotzer eng Aufgab wëllt maachen, wéi en Hotel ze buchen.

Kuckt Iech eng méiglech Serie vu Benotzeraktiounen un:

1. Eng Rees Säit presentéiert de Benotzer eng Lëscht mat méigleche Plazen fir ze bleiwen.
2. De Benotzer tippt d'Foto vun engem charmante Bungalow. Näischt geschitt. Lektioun geléiert: Fotoen féieren net zu méi Informatiounen iwwer all Immobilie.
3. De Benotzer exploréiert weider. Hien oder hatt kann no engem "méi Info" Link sichen oder op den Nuetspräis tippen. Si kënne probéieren d'Foto erëm ze tippen, just am Fall. Eleng gelooss gëtt e bestëmmte Benotzer weider verschidden Elementer op der Sich no méi Informatioun iwwer de Bungalow ze tippen.
4. Schlussendlech tippen se den Hotel Numm (vläicht als Knäppchen oder Link presentéiert), a si ginn op eng méi detailléiert Säit weidergeleet. De Benotzer gesäit eng charmant Atmosphär awer kee gratis Kaffi. Et passt net hire Critèren, sou datt se weider sichen.

Elo, hei ass wou de Muster erakënnt. Nodeems et geléiert huet datt eng Miniaturfoto net tippbar ass, awer den Numm vum Hotel ass, de Benotzer weess elo genau wat et maache soll.

Geléiert Verhalen

Dëst geléiert Verhalen ass eppes wat d'Leit besonnesch gutt maachen. Wärend vill Faktoren beaflossen wéi d'Leit léieren, geet eng kleng Erfahrung e laange Wee. Dëst ass eng Form vun instrumental Léieren, an där d'Leit sech un d'Resultat vu vergaangenen Erfarunge gutt genuch erënneren fir hir zukünfteg Verhalen z'änneren.

Net all Muster ass sou absolut wéi d'Sichresultater Beispill. Wéi erkläert am Web UI Muster Handbuch, d'Iddi vun engem Muster iwwerdréit seng Implementatioun.

Zum Beispill, vläicht Kugelzäite si ronn Punkte, kleng Quadrater, Checkboxen oder witzeg Quiggelen. Awer wann en Objet op der Säit vun enger Zeil vum Text sëtzt, an et gëtt méi wéi ee vun hinnen, verstoen d'Benotzer et funktionnéiert als Kugelpunkt.

An engem ähnleche Sënn brauche Linken net ëmmer vu blo op violett ze wiesselen. Wéi déi verschidde Kugelformater, verstinn d'Benotzer datt de richtege Muster ass datt d'Links d'Faarf änneren fir hire Status ze reflektéieren.

D'Benotzer erënnere Musterverhalen méi wéi wéi d'Muster selwer ausgesäit. Wann Dir et sécher spille wëllt, bleift ëmmer konsequent mam Verhalen.

Universal Design Konventiounen

Firwat huet eisen hypotheteschen Hotel-Sich iwwerhaapt probéiert, kleng Biller vun Hoteler ze tippen? Well kleng Fotoen tappbar ze maachen, all nieft kuerz beschreiwe Blurbs, ass heefeg.

News Säiten benotzen et. Blogs benotzen et. Amazon mécht Produkterbiller an de Sichresultater tappbar. Also och Google an, méi zum Punkt, TripAdvisor, Orbitz an Yelp. Dëst ass en etabléiert Muster. Et gëtt einfach ouni Erklärung verstanen.

An eisem Hotel Beispill hu mir dat etabléiert Muster gebrach. De Benotzer tippt eng Miniatur op eiser Säit an näischt geschitt. Si hu liicht irritéiert. Net genuch fir se fort ze dreiwen (denkt drun datt se weider tippen) awer genuch fir e schlecht Virgeschicht ze setzen.

Futtis Erwaardunge si kumulativ. Wann e Design ze wäit vun de erwaarten Konventiounen ofwäicht (extern inkonsistent), stellen d'Gesiichter Resistenz géint d'Benotzung vum Site. Wann en Design vu sech selwer ofwäicht (intern onkonsequent), da gëtt et einfach direkt frustréierend.

Et brauch e staarke Virwëtz, oder aussergewéinlech Iwwerraschung a Freed, fir Benotzer iwwer nei Konventiounen z'informéieren. Awer al Gewunnechten stierwen haart, besonnesch um Internet, wou Konventioune sech verstäerke mat all neien Hyperlink. Mir beschreiwe vill visuell Musteren am Webdesign fir dat mënschlecht Aen, awer loosse mer e puer Grondlagen hannendrun erëmfannen.

01. Gestalt

D'Leit zéien Verbindungen tëscht disparate Formen. Am 1910 huet de Psycholog Max Wertheimer flimmerend Luuchte vun enger Eisebunnskräizung gekuckt. D'Muster huet eng Illusioun erstallt datt d'Luuchten sech an engem Krees bewegen, och wa se just alternéiere mat guddem Timing.

Wertheimer, zesumme mat senge Kollegen, hunn Theorien iwwer Siichtwahrnehmung entwéckelt, déi grondleeënd fir Webdesign sinn. D'Theorien explodéieren iwwer dem Aristoteles säi vereinfacht awer klassescht Axiom, "Dat Ganzt ass méi grouss wéi d'Zomm vu sengen Deeler", wéi op Visuals ugewannt.

D'Gestalt Prinzipie tendéiere ronderëm eng Handvoll ähnlech Konzepter. Wärend si mat all Siichtwahrnehmung bezéien, sinn dës Iddien besonnesch applicabel fir UI Design.

De Logo hei uewen, erstallt an der Prototyping App UXPin, huet kee grousse Buschtaf "H" - awer eis Tendenz fir Formen ze gesinn, wou et kee gëtt, seet anescht.

Uwendung fir Webdesign: Formen a Konturen solle Prioritéit hunn iwwer manner Detailer. Et ass egal wéi faszinéierend e klickbare Knäppchen ausgesäit wann Är Benotzer net wëssen datt et e Knäppchen ass. Dës "Signifikateuren" hëllefen d'Funktioun virzeschloen (bekannt als Bezuelungen).

02. Proximitéit

D'Leit gesinn datt enk plazéiert Elementer verbonne sinn, besonnesch wa se vun anere Gruppen duerch nach méi Plaz getrennt sinn. Dëst verbënnt och an d'Zäit a raimlech Elementer vum Fitts Gesetz.

Dëse Prinzip benotzt negativ Plaz fir verschidden Elementer auserneen ze drécken, an anerer méi no beieneen, fir scheinbar Gruppen ze kreéieren déi keng Zeilen oder aner Indicateure brauche fir "dëst ass eng Grupp" wéi zum Beispill Standard HTML Felder.

Uwendung fir Webdesign: Elementer an Sektiounen gruppéieren ass vital fir d'Säitekompositioun. Sidebarë musse sech ausser dem Haaptinhalte stellen. Sektiounen am Inhalt brauchen Atmungsraum fir unzeginn datt se Sektiounen sinn. Fotoen, Titelen a Beschreiwungstext a Sichresultater musse Clustere bilden fir diskret Eenheeten ze bilden.

Wéi Dir op der rietser Säit an der ueweger Illustratioun gesitt, ginn d'Sichresultater diskret Elementer wann Dir e bësse Raum bäifügt fir unzeginn "dëst ass eng Grupp."

03. Faarf

Helle Faarwen schéngen "uewen ze kommen" cool, donkel Nuancen a Faarftéin. Wann Dir Tiefe fir Design bäifüügt, si wéineg Techniken méi effektiv wéi verdonkelt Elementer am Hannergrond. Fir ze verstoen firwat, brieche mir d'Faarftheorie an dräi Deeler of:

• Kontrast: All Faarftéin huet e Géigendeel - eng "Arch-Nemesis" deem säi Kontrast wäit méi grouss ass wéi all aner Faarf.
• Ergänzung: Faarwen stinn net ëmmer mateneen. Ergänzend Faarwen accentéiere sech géigesäiteg a bréngen hiert Bescht eraus, de Géigendeel vum Kontrast. Dëst sinn d'Faarwen direkt niewenteneen um Faarfrad, zum Beispill, purpur Ergänzunge si blo a rosa.
• Vibranz: All Faarf bréngt eng spezifesch Stëmmung op: déi méi hell waarm Faarwen (rout, orange, giel) tendéieren de Benotzer ze stäerken a maachen se méi alarméierend, wärend däischter cool Nuancen (gréng, blo, violett) éischter méi entspaant a roueg sinn.

Zwou Variatiounen vum Logo gemaach an UXPin féieren zu zwee verschidde Gefiller. Op der lénkser Säit, cool Nuancen am Hannergrond maachen d'Gestalt Formen aus dem Canvas. Op der rietser Säit si waarm Faarwen méi invitéierend - an eventuell spannend. Awer si falen hannert der wäisser H Form, déi dominéiert an de Logo selwer definéiert.

Keen dovu registréiert sech bei den duerchschnëttleche Benotzer. Alles wat hatt oder hie wëllt ass e proppert Zëmmer ze buchen. De schnellste Wee vu Sich no Buchung ass e Muster ze benotzen dat se scho kennen. Wéi mir gesot hunn, hunn d'Sichresultater - Hotel oder soss - en etabléiert Format.

Am Fall vun engem Hotel-Finding Site musse mir Benotzer mat relevante Sichresultater presentéieren fir datt se eng informéiert Entscheedung treffen. Heiansdo heescht dat eis kreativ Impulser ofzeginn a probéiert a richteg a langweileg Prozesser ze follegen. Awer dat heescht net datt mir net Spaass hunn.

04. Empathie op UI Designmuster uwenden

Mir kënne bekannte Mustere fir eise Virdeel benotzen. Awer fir bewosst hir onbewosst Tendenzen ze benotzen, brauche mir e bëssen Empathie a vill Planung.

Fir unzefänken, musse mir déi exakt Problemer definéieren. Dat ass eng Disziplin u sech, an enthält dacks Froen wéi:

• Wéi eng Elementer si méi wichteg wéi anerer?
• Wat klickbar ass, a wat net?
• Wéi wëssen d'Benotzer datt se kënne fir méi Informatioun scrollen?
• Wéi eng Ikon soll ech fir eng bestëmmten Aufgab benotzen?
• Wat seet de Benotzer datt eng Funktioun behënnert ass?
• Wéi wëssen d'Benotzer wéini eng Sektioun ophält, an eng aner fänkt un?
• Wéi soe mir de Benotzer "sief geduldig - dëst lued nach ëmmer?"

... an aner Froen iwwer Kommunikatioun déi Designer sech stellen. Awer fir et mat Empathie unzegoen, musse mir d'Saache maachen. Gesinn Saachen aus der Siicht vum Benotzer.

• Wou sinn ech um Site?
• Wat soll ech als éischt kucken?
• Wou kann ech vun hei goen?
• Wéi maachen ech dës modal Fënster fort?
• Soll ech dat tippen, oder soll ech dat tippen?
• Fir déi Saach, wat kann ech tippen?
• Enthält dës Säit déi Informatioun déi ech wëll?
• Wat kann ech op dëser Säit ignoréieren?

Wa mir Mustere um Internet sichen, da gi mir op d'Juegd fir nogewise Léisungen, déi de Benotzer hëllefen hir Ziler z'erreechen, egal ob et en Hotel wielt, Artikelen duerchsichen, Sportsstatistike liesen, Biller posten oder mat Frënn chatten.

Glécklech si mir vu Musteren ëmginn. Si sinn sou heefeg datt et einfach ass se ze iwwersinn. Awer si existéieren. Ausser se selwer ze sichen, Quelle enthalen:

1. UI Patterns - E Repository vu Proben aus dem Internet, organiséiert vum Thema mat hëllefräichem beschreiwenden Text.
2. Web UI Design Muster - Gepackt mat Informatioun iwwer wéi a firwat vu Musteren, deckt eis gratis E-Book aktuell Trends am UI Design.
3. Iwwerzeegend Ausléiser - Sicht laang genuch um Internet an Dir fannt Pärelen wéi dësen Smashing Magazine Artikel iwwer psychologesch a Verhalensmuster.
4. PatternTap - Eng grouss Sammlung vu Screenshots, organiséiert mat Tags, déi Inspiratioun fir Designelementer féieren.

Fazit

Wat méi Designer Mustere benotzen, wat méi Benotzer se verstoen, sou datt se méi wäertvoll sinn fir Designer ze benotzen. Dës géigesäiteg Bezéiung ass zënter den éischten Deeg vum Webdesign bestoe bliwwen. Trends kommen a ginn, awer déi Basis Iddien bleiwen zäitlos.

Wann Dir dëse Post hëllefräich fonnt hutt, gitt weg a kuckt de gratis Web UI Muster Handbuch.

D'Buch gouf geschriwwe baséiert op meng Erfahrung fir Websäiten ze designen fir déi lescht 20 Joer. Den 104 Säite Guide erkläert wéi Dir déi bescht Designmuster mat 100+ Beispiller vun ESPN, Adobe, AIGA, The Discovery Channel, a méi benotzt a wielt.

Wierder: Ben Gremillion

De Ben Gremillion ass en Inhalt Designer bei der Prototyping App UXPin wou hie fir hir gratis Ebook Bibliothéik schreift. Hien designt a kodéiert fir de Web fir bal 20 Joer. Hie baut a féiert och e CMS fir Web Comic Artisten.

Liked dëst? Probéiert dës ...

• Designjargon erkläert: Webdesignmuster
• UX Portefeuillen richteg gemaach
• Websäiten mat brillanter Typographie