Konsistens i UI-design är en gammal skolprincip och något bortglömd i några av dagens webb- och applikationsdesigner. Det verkar som att designers väljer att släppa ut konsistens från sina gränssnitt.
När det gäller design av mobilapplikationer väljer vissa designers att återuppfinna, återskapa eller till och med helt bryta maskinvarans standardinteraktioner med sina egna unika gränssnittsmönster. Medan du bryter över konsistensen mellan hårdvaru-gränssnittsreglerna och din apps-upplevelse kanske inte är en dålig idé, kan bryta dina egna program konsekvenser.
Tre steg till konsekvent användargränssnitt
Det finns i grunden tre typer av konsistens som du bör tänka på när du utformar dina webb- och mobilappdesigner:
- 1. Håll dig överens med riktlinjer och beteenden för UI-enheter
- 2. Håll dig konsekvent med andra liknande webbplatser eller applikationer
- 3. Håll dig konsekvent med din egen design
I den här artikeln vill jag fokusera mer på den tredje - hålla konsistensen i ditt eget användargränssnitt. Det här är en stor sak, främst för att du inte vill förvirra eller överraska dina användare i din egen app.
Du vill inte att en användare ska gå från din hemsida till en undersida och se olika styling eller till och med väldigt olika användarinteraktioner. Den här typen av saker kan överraska användare eller i vissa fall skrämma bort dem. Konsistens är inte bara en stor sak för webbplatsens övergripande användbarhet, det kan också öka konverteringen mycket.
Konsekvent struktur och interaktioner
Detta är nyckeln till att skapa en konsekvent användargränssnitt. Ibland när vi utvecklar glömmer vi hur strukturen och interaktionen påverkar den övergripande användarupplevelsen. Men precis som blueprinting och skapande av planer är viktigt när man bygger ett bostad eller byggnad, är det också viktigt att skapa en konsekvent användbar gränssnitt. Det finns några saker att tänka på och planera innan du börjar skriva kod.
- 1. Överväg hur du konsekvent lägger in element i hela din webbplats eller app.
- 2. Tänk på vilka användargränssnitt du använder.
- 3. Planera vilka ingående element du behöver.
- 4. Ta reda på vilka ikoner du behöver, och välj eller utforma en bra ikonuppsättning som täcker dem alla.
Elementplacering är ett enormt sätt att minska överraskningen hos användaren och skapa konsekventa och pålitliga förväntningar. Håll dina navigeringar på samma plats, ingenting irriterar en användare snabbare än att flytta eller försvaga navigationselement. Håll även logotyper och andra märkesvaror på samma platser genom hela webbplatsen.
? Ingenting irriterar en användare snabbare än att flytta eller försvaga navigationselement?Om du använder ett sidofält, skaka inte upp sidofältet för mycket genom att ändra vad som finns i dem från sida till sida. En del av detta kan vara relevant för innehållet på sidan, men undvik att ta bort eller till och med flytta importera övergripande element som sökformulär. En stor sak att hålla ständigt placerad är inloggnings- och användarinställningslänkarna eller knapparna.
Överväg UI-mönster
Planera och tänka på vilka användargränssnitt du behöver. Ska du behöva ett galleri? Modals? Dragspel? Sidofält? Planering av designmönster i förväg hjälper dig inte bara att utveckla och designa din app snabbare, utan att tänka på vilka designmönster du behöver också hjälper dig att räkna ut ditt innehåll i förväg - vilket också kan spara mycket tid.
Detta kommer också att lösa problem och svara på frågor i förväg, så här när du kommer till en sektion eller sida på din webbplats som kräver ett gränssnittsbeslut, du har redan gjort det och du kommer inte bli fångad och skapa en mishmash av designmönster hela din webbplats.
Tänk på dina former före hand också. Planera vilka formelement du behöver och ta reda på de element som du inte behöver eller att du kan ersätta. Formelementen kan vara skrämmande eller till och med knepiga för användarna att navigera i alla fall, så om du kan eliminera eller byta ut några inmatningar som kan vara snubblar, gör det.
? Om du kan eliminera eller byta ut några ingångar som kan vara snubblar, gör det.?Detta är också ett bra sätt att ta bort beslutsfattandet från utvecklingsprocessen. Att hålla formulär konsekventa både i stil, struktur och interaktion kan ibland göra eller bryta en omvandlingsfrekvens.
Återigen planera huvudet. Planera vilka ikoner du behöver före tid. Ett super snabbt sätt att skruva upp din konsistens är att vara halvvägs genom utvecklingen av din app när du får reda på att du behöver skriva ut ikoner, och inse att du inte kan komma ihåg var du fick dina ikoner eller om du kan hitta en utskriftsikon som matchar resten av dina ikoner.
Detta är inte ens en stilfråga verkligen, utan en interaktiv. Användare kommer att vänja sig vid att se en viss ikoner och kunna känna igen dem snabbt. Men om du använder en patchwork ikonuppsättning kommer du att förvirra din användare eller göra det svårt för dem att berätta vad vissa ikoner representerar.
Konsekvent stil
Stilen och utformningen av varje användargränssnitt är viktigt och upprätthållandet av konsistensen mellan dem är också viktigt för användaren. Precis som det är viktigt att ha en konsekvent ikonuppsättning är det viktigt att din app har överkonstruktionskonformitet till den. Du kanske tror att vissa knappar är coola trots att de inte kommer nära att matcha över alla design eller färgscheman på webbplatsen, men det kommer bara att förvirra din användare och se ful.
När du utformar ett användargränssnitt är det några saker att tänka på för att skapa konsistens:
- 1. Färgschema
- 2. Stil
- 3. Gränser
- 4. Typ och typsnitt
- 5. Storlek
- 6. Bakgrundsbilder
- 7. effekter
Färger
Som jag sa tidigare, behåll din UI-färg i överensstämmelse med över allt färgschema på din webbplats. Även när du utformar samtal till handlingar där du vill ha knappar att sticka ut och märkas, var försiktig så att du inte gör ditt uppmaning till en stämningsfull grym komplimang till ditt över allt färgschema.För att hjälpa dig, använd verktyg som Kuler eller ColorSchemer för att hjälpa till att välja färger som går bra tillsammans.
När jag pratar om att hålla din stil konsekvent talar jag om att inte använda någon galen lutningsknapp med droppar skuggor och vinklar om resten av webbplatsdesignen är platt och inte har en skugga eller gradient på den. Förutom att hålla sig i överensstämmelse med den övergripande webbplatsdesignen, förbli konsekvent med stilen på dina användargränssnitt. Om du använder en viss färg eller typsnitt på dina inmatningsetiketter, håll dig fast och använd den på alla etiketter.
Gränser
Ahh, gränser. För ofta ser jag webbplatser som använder tre eller fyra olika knapptjocklekar eller radier och det kan verkligen vara förvirrande. Håll alla dina gränser på knappar, ingångar, val, gallerier, bilder och alla andra UI-element som överensstämmer med varandra. Det betyder inte att du måste använda på gränsenradie, du kan blanda upp det genom att ha några värden eller till och med använda en stil konsekvent på varje element.
Typ och typsnitt
Att använda samma typ och teckensnitt i dina element är en ganska viktig sak, speciellt när man arbetar med formelement. Håll huvudet konsekvent och använd inte för många teckensnitt, trots att du kanske gillar dem alla - du kan spara dem för andra projekt. Ingångar och knappar ska ha teckensnitt som matchar eller kompletterar varandra så att formulär lätt läses och förutsägs.
Storlek
Storleken på teckensnitt och andra element ska vara konsekventa eller komplement till varandra. Rubrikerna och rubrikerna på sidorna bör alla förbli konsekventa så att användaren vet att de här textraderna faktiskt matchar rubriker och titlar. Konsekvent storlek gäller även för alla användargränssnitt från innehållsregioner, länkar, navigeringselement eller sidofält. Undvik att ändra storleken på någon av dem till drastiskt mellan sidvisningar så att användaren kan känna igen dem omedelbart när sidan laddas.
Bakgrundsbilder
Försök att inte ändra dina bakgrundsbilder för mycket. Det händer inte så mycket i dag som det brukade, men det är fortfarande en bra idé att undvika att ändra dina bakgrundsbilder från sidvisningar till sidvisningar. Om du gör det, försök att göra bilden relaterad till varandra på något sätt så sidorna förlorar inte konsistens. Att ändra bakgrundsbilden, särskilt stora, kan göra att webbplatsen känns ojämn och få användaren att känna att de ens har lämnat din webbplats helt, så försök verkligen att undvika denna frestelse.
effekter
Effekter, viktigast belysningseffekter, kan göra det som verkar som en bra webbplatsdesign inte vettigt för användaren. Om du till exempel använder en höjdpunkt på den knapp som det ser ut som om ett ljus lyser ovanpå det, använder du samma ljuseffekt på avfasad text i knappar eller avfasade textinmatningar.
Ärligt talat, det här är verkligen inte en stor gör det eller bryter det handlar om användaren, men till den picky tittaren kan de märka inkonsekventiteten av dina effekter och bli distraherad från att göra vad de ska göra med din app eller webbplats.
Var inte tråkig
Att utforma för konsistens kan känna sig vardaglig eller ens tråkig ibland och du kanske bara vill kasta något i din design för att kasta användaren en överraskning, och det är verkligen bra.
Det är bra att hålla användarna på tårna, inte skaka saker så mycket att de blir så avskräckta eller förvirrade att de lämnar och går någon annanstans. En liten konsistens kan gå långt.