Realism i UI-design är ett hett ämne just nu. Varje designblog som värt någonting är öppet att berätta för Apple att de är långt ifrån i deras förslag att iPad-appar ska efterlikna verkligheten.
Gå med i oss när vi lägger till något liv i debatten genom att ta itu med några av dessa begrepp. Vi går över när realismen är effektiv och när den är destruktiv och hur du kan använda den i dina egna mönster utan att förstöra ditt gränssnitt.
IPad Sparks a Debate
Ända sedan iPad-utgåvan har det diskuterats mycket om användandet av realism i användargränssnittet. Apple uppmuntrar designers att ge sina iPad-appar en visuell metafor snarare än att skapa dem för att se ut som den typiska digitala konsten som vi traditionellt ser i UI-design.
Till att börja med, vi designers tycker inte särskilt om människor som berättar hur vi gör våra jobb. Dessutom är många inte nöjda överallt med Apples UI-förslag eller till och med Apples egna gränssnittsval i standard iPad-appar som Notes och Calendar.
Detta har lett till några stränga varningar från designgemenskapen om användning av psuedo-realistiska gränssnitt. Även om dessa varningar är väl avsedda, väl argumenterade och legitima, förefaller debatten vara ensidig på den här tiden, så jag skulle vilja ha ett nytt perspektiv för att hålla sakerna ärliga och intelligenta.
På axlarna av jättar
Det mesta av dagens diskussion i denna arena kommer att bygga på tre utmärkta artiklar om ämnet från kamrater som jag starkt respekterar:
- Designing for iPad: Reality Check av Oliver Reichenstein
- Realism i UI-design av Lukas Mathis
Uncanny Valley
Den mest lämpliga titeln på den kamp som vi står inför med realism i design kommer från Francisco Inchaust i sin artikel från GetFinch.com. Han noterar att Masahiro Mori myntade termen? Uncanny Valley? på 70-talet för att hänvisa till en punkt i utvecklingen av robotteknik där maskinerna blir så mycket som människor att vi är förskräckta av dem, eller i alla fall gjort oroliga genom deras utseende.
Denna idé gäller perfekt för trend i UI-design. Reichenstein har ett utmärkt exempel i sin artikel: en skärmdump från det hemskt psuedo-realistiska gränssnittet till Kai's PhotoSoap.
Är Trend-Bashing bara en annan trend?
Det är definitivt ett fall att vi ser en återupplivning av gränssnittsdesign i samma ven. Men som designers börjar hämta detta och bash andra för det, märker jag en tvekan i designgemenskapen att tillämpa någon form av realism för rädsla för att bli mobbad. På ett sätt blir Twitter, Dribbble och blogosfären en lekplats och det finns många barn som vill passa in och göra vad som är coolt utan att störa någon annan.
I stället för att slå upp barnet som bestämde sig för att ha på sig Teenage Mutant Ninja Turtles-t-shirten, har vi en tendens att scoff hos designers skapa gränssnitt med allt annat än soliga färger och en minimalistisk designstil.
Problemet uppstår när attackerande trender bara blir en trend i sig, utan korrekt analys av vad som är och inte är bäst från användarens perspektiv. designers skall kritiseras och trender skall identifieras korrekt, men vi måste se till att vi inte bygger hårda och snabba regler baserade på företräde snarare än logik.
Vad är så dåligt om realismen?
De artiklar som jag nämnde ovan innehåller några populära UI-design exempel som ses som flörtar med Uncanny Valley, vilket innebär att deras realism faktiskt förringar erfarenheten.
Låt oss ta en titt på några av dessa för att se om vi verkligen kan rikta oss till problemen. Den första är Apples iBooks-gränssnitt, som visas nedan.
Nu har jag med rätta skrivit om hur jag förlorar iBooks läsgränssnitt. Men jag tror att jämföra problemet här med Uncanny Valley är faktiskt en felaktighet. Bokgränssnittet är uppenbarligen ganska? Toony? och inte så realistisk att det gör min hjärna misstro över det. Jag stirrar inte på de staplade sidorna för några minuter i slutet, och tänker på att de är så verkliga men fortfarande på något viktigt sätt som jag gör med den mycket modifierade versionen av Jeff Bridges i Tron Legacy.
Så vad är verkligen problemet här? Problemet är att Apples söta lilla gränssnitt är en komplett distraktion som använder ledigt utrymme väldigt dåligt. Det crease som går ner på mitten av sidan gör mig inte upphetsad över realism, utan det bara efterliknar den enda sämre delen av att läsa en riktig bok!
Realismen i iBooks-gränssnittet blir faktiskt i vägen för appens fokus: läsning. Eftersom de gjorde plats för sin metafor, har jag mindre utrymme för min läsupplevelse. Detta blir uppenbart när vi tittar på Kindle iPad-gränssnittet:
Detta är en frisk luft i jämförelse med iBooks, men varför? Är det så att min hjärna äntligen kan vara fri från plundringen av Uncanny Valley eller att gränssnittet har mycket mer utrymme att andas och ger mer utrymme till vad jag verkligen vill se? Jag skickar in den senare. Lägg märke till att reglaget längst ner, vilket ser ut som en riktig knapp som du kan flytta fram och tillbaka. Detta stör mig inte en bit. Det är både attraktivt och, ännu viktigare, ur min väg!
En historia av effektivitet
Jag tror att exemplet ovan tydligt visar hur bra designers går fel med realism. Visst finns det många gränssnittsdesigners som kan göra någonting som är vanligt gammalt fult på egen bekostnad, men det finns också massor av extremt begåvade designers som helt enkelt blir så vana vid att skapa sitt realistiska gränssnitt som de glömmer användbarheten. Sökandet efter beundran av sina Photoshop-färdigheter gör att de förlorar synen på huvudmålet med ett gränssnitt: att göra ansökan enkelt och roligt att använda.
För att ytterligare utforska denna idé, låt oss ta en titt på ett annat exempel som används av Inchauste: det gamla Cockpit for Mac-gränssnittet, som visas nedan.
Återigen undrar jag om problemet här verkligen är ett försök att realisera, eller hur det påverkar gränssnittets effektivitet. För att vara ärlig gör jag inte glaset, gummi och metallens texturer. Visst, de är trendiga men på ett förmodligen attraktivt sätt.
Det som verkligen får mig är den förvirrande cirkulära kontrollen (som sedan har övergivits) och allt tomt utrymme runt det. Knapparna har blivit obehagligt inramade i ett litet, rörigt utrymme på grund av en realistisk designmetafor som utförs. Precis som vi såg i iBooks, skulle överge denna metafor möjliggöra en mycket mer logisk och användarvänlig användning av utrymmet.
Börja med effektivitet
Så hur balanserar vi Apples idé om att realistiska gränssnitt är roligt och önskvärt för användarna med principen att dessa typer av gränssnitt ofta brukar använda användbarheten?
Ett lämpligt exempel finns direkt på iPad och iPhone. Detta gränssnitt började på den första iPhone med effektivitet i åtanke. Det ursprungliga kärnkonceptet var helt enkelt ett galler av ikoner på en solid svart bakgrund. Nedan kan vi se iPad: s hemskärmslayout förenklad för att markera dess struktur.
Visst, nätverkslayouten börjar förlora sin effektivitet när du har 75 appar (ibland skulle jag döda för en listvy), men för en handfull välorganiserad innehåll fungerar det bra. Designers använder ständigt raster för allt från ett miniatyrgalleri till hela webbsidor. Observera att vi har börjat med en solid grund, inte en sammandragande metafor.
Så kan vi lägga till en viss realism här utan att förstöra vår användbarhet? Ännu bättre kan vi lägga till realism och faktiskt öka användbarheten? Det kan du ge dig på. Se hur mycket bättre det blir när vi lägger till lite liv på ikonerna.
Observera att den mest abstrakta, icke-realistiska ikonen här är faktiskt den svåraste att tolka. App Store-ikonen, för alla som inte är bekanta med OS Xs programmapp, är helt och hållet förvirrande. Du mormor skulle nog inte ana vad den här ikonen gör. Visa henne dock den realistiska anteckningsikonen och hon kan omedelbart berätta vad ansökan är tänkt att göra. Lukas Mathis utforskar liknande idéer om ikondesign i sin artikel.
Nu kan vi ta realismen ännu längre utan att förstöra designen? Vad händer om vi slänger in några av de trendiga texturerna som designers hatar så mycket? Det kommer säkert att döda det, eller hur?
För att svara på detta, låt oss lägga till en bakgrund från en av de tio mest populära betalade iPad-appar på App Store just nu (Pimp Your Screen). Om det finns ett sätt att användare verkligen kan rösta på den erfarenhet som de gillar bäst, är det med sina plånböcker.
Här har vi lagt till en välkänd visuell metafor. Nu är det här den snyggaste trästrukturen? Absolut inte. Faktum är att jag skulle säga att det är farligt närmar sig Uncanny Valley. Och ändå har det inte egentligen förstört vår användbarhet som iBooks läsgränssnitt gör (även om det lånar kraftigt från iBooks-hyllplanet). Detta beror på att vår kärnstruktur, som byggdes på användarvänlighet och en effektiv layout, förblir intakt.
Intressant nog, om du applicerar tapetet ovanför och sedan vänder iPad vertikalt, är allt förstört. Ikonerna stämmer inte upp i hyllorna och metaforen blir störande.
Jag tycker att detta håller nyckeln till att dra av realistiska gränssnitt på rätt sätt. Problem uppkommer när designers börjar med trendiga metaforer och resultatet är ett användargränssnitt som är ineffektivt och ineffektivt. Användbarhet offras i namn av vackra bilder. Men när du börjar med en enkel och solid grund, strukturerad med användbarhet i åtanke, kan du gradvis lägga till stil. Tänk på att du fortfarande måste döma varje förändring och bestämma om förändringen förbättrats, minskade eller var neutral för användbarhet.
Testet
Ett bra test för dina gränssnitt är huruvida du kan ta bort metaforen och ändå ha layouten meningsfull. Till exempel, när du tar fluffen ut ur iBooks-gränssnittet, är du kvar med obekväma distanserade punkter som uppenbarligen inte utnyttjar ledigt utrymme. Detta beror på att sidkryssningen i mitten skruvade upp layouten.
Tänk nu om du tog The Hit List, som visas nedan, och avlägsna någon likhet med anteckningsbokspapper eller tredimensionella flikar. Skulle layouten fortfarande vara meningsfull? Svaret är? Perfekt.? Designern har en stark, välbekant struktur som har stylats för att göra den mer attraktiv. Det här är väldigt annorlunda än ett gränssnitt som är besvärligt strukturerat för att följa med en förutbestämd visuell idé.
Är realism bara för designers?
Diskussionen hittills har tagit upp tanken att realism kan vara närvarande utan att hindra användbarhet, och i händerna på någon med verklig talang kan den till och med förbättra den. Det finns emellertid en annan viktig aspekt av denna debatt som fortfarande är oadresserad: Vill användare det?
De konsekvenser som för närvarande görs av många i denna debatt är att de realistiska gränssnitt som ses i många iPad-apparat består av ögonljus som designers har skapat för designers. Normala användare, enligt detta argument, bryr sig ingenting om dessa prettified pixlar och vill bara slutföra en given uppgift.
Jag tror att detta argument är långt ifrån basen. Först, du ger inte genomsnittliga människor tillräckligt med kredit. Bara för att någon inte är en designer betyder inte att de inte kan uppskatta attraktiv design. Jag är inte en målare men jag har grundligt haft konsthistoria på college.
Alltför ofta hör jag designers dogging allmänheten som människor som inte uppskattar "bra design." Om det var sant, skulle vi vara ute av ett jobb! Många känner igen och uppskattar attraktiv design och hyr oss eftersom de vet vad de kan producera på egen hand, är det inte.
För det andra finner jag det för alla en vanlig person? som gillar ett trendigt realistiskt gränssnitt, kan du hitta tio designers som hatar det. Picky designers är människor som kritiserar Apples kalenderapp, resten av världen köper iPads som godis, delvis på grund av de snygga gränssnitt som de ser på reklamfilmerna.
Designers som oss spenderar timmar debatterar fördelar och nackdelar med realism i UI design. Under tiden sitter näst sista på nummer fyra plats för betalda nedladdningar. Den här appen använder ett realistiskt bärbara gränssnitt för att efterlikna en riktig skrivupplevelse, och användarna kan inte få nog av det.
Är jag imponerad som en designer av realismen i det näst sista gränssnittet? Inte på distans. Faktum är att jag inte gillar hur appen ser ut. Men din genomsnittliga joe iPad-ägare tycker att det är bra.
Min poäng är att det populära argumentet har det bakåt. Effektiv realism i UI-design är inte bara droolframkallande dribbelfoder, det är något som användarna kan och uppskattar och är villiga att betala en premie att ta emot.
Slutsats
Är realism missbrukad i UI-design? Det kan du ge dig på. Är realistiska iPad-gränssnitt en trend som kommer att passera? Absolut. Är de för alla? Absolut inte. Minimala appar som iA Writer säljer ofta som varmkakor eftersom de överger realism för att få effektivitet.
Den punkt som jag gör i den här artikeln är det? Realism? är inte det smutsiga ordet som designers för närvarande gör det för att vara. Som designer bör du inte överge en riktigt bra gränssnittidé i rädsla för att Uncanny Valley-polisen kommer och får dig. Du bör definitivt vara uppmärksam på den här principen, notera att även Apples gränssnitt är avsiktligt blyga långt ifrån fotorealism, men du bör inte vara rädd för att lite textur gör användarna hata din app.
Framgångsrika UI-designers vet att en solid, användbar grund är grunden för en väldesignad applikation. Hur mycket extra styling du tillämpar beror på din målgrupp och huruvida de kommer att uppfatta det som att hjälpa eller hindra designen såväl som sammanhanget för ansökan.
Fråga dig själv följande frågor: Ger min metafor mening i den här inställningen? Kommer layouten att vara stark om metaforen tas bort? Tillämpar jag realism för att förbättra appens acceptans och användbarhet eller för att jag är benägen att följa trender? Har min målgrupp en tendens att älska eller hata liknande idéer?
Lämna en kommentar nedan och låt oss veta vad du tycker om huruvida det finns rätt och fel sätt att närma sig ett realistiskt gränssnitt. Hur mäter du när realism är effektiv kontra när det skadar integriteten hos en design?