Share
Designers vs developers - det är ett argument lika gammalt som datorer. Sanningen är dock att ingen kan leva utan den andra. En lysande UI-design är lika värdelös utan funktionalitet, vilket är det bästa koden med en ful, oanvändbar frontend. I det här första inlägget om användargränssnitt för utvecklare kommer jag att försöka lägga ut några enkla grundregler som devs kan följa för att se till att deras appar, mallar och prototyper är lika vackra som själva koden - och användbar för att starta.
Tänk: första intrycket är det sista intrycket.
Justering hänvisar till position eller orientering av ett element i förhållande till ett annat element eller till sig själv. När vi hänvisar till två element som är inriktade mot varandra, hänvisar vanligtvis till vilken sida av båda elementen är i linje. I textens sammanhang hänvisar justering till den sida som texten förankras i en rak linje.
I bilden ovan visar det andra exemplet på en enkel formkonstruktion etiketter som är rätt inriktade mot varandra med inmatningsfält som är vänstra inriktade. Detta säkerställer att associeringen mellan varje etikett och dess inmatningsfält är klar och användaren blir inte förvirrad om vissa etiketter är för små medan andra är långa.
Tänk på: Se till att inmatningsfälten inte är långt ifrån den längsta etiketten. Om variationen i bredden är liten, försök högerjustera etiketter och vänsterjustera inmatningsfält.
För text är det idealiskt att använda vänsterjustering vid desigering för skärmen. Eftersom de flesta förlagsmetoder för skärmtyp inte kan distribuera utrymme på lämpligt sätt när texten rättställs på båda sidor, fortsätter vänsterjustering textläsbar och välorganiserad. Du kan självklart använda centrum och rätt inriktning där designen kräver det, men de är vanligtvis reserverade för speciella fall och mindre bitar av text.
Det primära syftet med något användargränssnitt är att låta användargränssnittet kopplas till programmet. Detta, tro det eller inte, kommer inte att vara möjligt om du inte säger användaren vad han behöver göra och i vilken ordning. Eftersom du inte kommer att vara där bakom varje användare för att hjälpa dem med detta måste gränssnittet ge alla signaler. Här är några frågor att fråga när du utvärderar om det planerade arbetsflödet är lämpligt:
Låt oss ta exemplet på ett sökkategorival på iStockPhoto. I det här fallet kan jag antingen söka allt eller välja en specifik kategori för att begränsa mina sökningar till den typen av information. Eftersom den primära lagen är att skriva in en sökterm och trycka på Sök, borde de vara ganska uppenbara. Ett eventuellt steg däremellan är att välja en kategori, som kan vara en rullgardinslista mellan (du gissade det rätt) sökfältet och sökknappen.
Ett annat exempel är dialogrutan inkomst / kostnad inmatning i cashbase-appen. Fälten är ordnade enligt det typiska arbetsflödet som ska användas för att logga in sådan information: Ange beloppet (vilket är det viktigaste elementet), välj en kategori, lägg till en notering om det behövs och klicka på Lägg till. Sekundär information som kommer att användas mycket mindre ofta - som det datum som standard är idag, och möjligheten att upprepa eller avbryta - finns tillgängliga, men mycket mer subtila.
Relaterade element i ett gränssnitt ska grupperas ihop. Det här låter som sunt förnuft när jag nämner det, men det är inte alltid väl förstått. Anledningen till att alla sidnavigationslänkar på de flesta webbplatser läggs ut i en enda horisontell stapel är att användaren kan identifiera förhållandet vid en blick och göra valet att interagera med dem utan förvirring.
Låt oss titta på det här exemplet från Gmail - en app som många använder regelbundet. Det här är verktygsfältet som visas högst när du öppnar ett mail. Även om alla dessa knappar utför någon åtgärd i det öppna meddelandet, grupperas de vidare ihop baserat på vad de gör - åtgärder man skulle använda för att bli av med meddelandet (arkiv, skräppost, radera), för att ändra meddelandets betydelse (när använder prioriterad inkorg), etikettrelaterade åtgärder och slutligen en nedrullning med sekundära alternativ.
Ett annat exempel på god användning av närhet är alternativfältet i Zootool. Verktygsfältet längst ner är uppdelat i tre uppsättningar, var och en motsvarar de tre rutorna i appen: listan packar till vänster, postfönstret i mitten som innehåller alla dina bokmärken och detaljeringsfönstret till höger.
Inte allt i ett användargränssnitt, eller någon layout för den delen, har samma betydelse som allt annat. Hierarki är arrangemang av element på ett sätt som anger vad som är högre i ordning, vad som kommer nästa och så vidare.
Låt oss titta på det här exemplet här och försöka identifiera vad prioritetsordningen är. Eftersom allt - titlar, etiketter och stycktext - ser lika ut, måste man läsa igenom allt för att få mening. Om samma gränssnitt var tweaked bara lite som nedan, den övergripande effekten på läsbarheten och i sin tur användbarheten av gränssnittet är enormt.
Som regel bör sidans rubrik vara störst och mest synlig på skärmen. Detta följs av avsnittstitlar, undertitlar och mindre etiketter. Punkttext kan vara mer eller mindre framträdande beroende på dess syfte. Det är inte heller begränsat till text. Primärtangentknappar kan differentieras från sekundära handlingar genom att göra dem ljusare, större eller snyggare. Inmatningsfält för obligatoriska ingångar kan göras tydligare än de andra. Jag kunde fortsätta, men jag tror att du får idén.
En annan mycket viktig faktor vid utformning av gränssnitt är att säkerställa tydlig differentiering mellan element. Naturligtvis vill du att texten ska kunna läsas i bakgrunden, men kontrast går utöver att helt enkelt använda lätt text på en mörk bakgrund eller vice versa. Rubriker och stycke text ska tydligt särskiljas. Paneler och navigeringsfält måste separeras från varandra så att användaren vet vad som är vad. Listan fortsätter.
Kontrast kan etableras med hjälp av en eller flera av följande egenskaper:
Detta borde vara uppenbart, men det är fantastiskt hur ofta folk glider på denna punkt. Om din bakgrund är ljus, vill du självklart att texten är mörk för att säkerställa läsbarhet. Även om teorier i teorin ska fungera bra tillsammans, är det inte alltid så lätt. Försök att placera ljusgrön text på en röd bakgrund och du kommer att veta vad jag säger.
Möjligheterna här är obegränsade, så min första rekommendation till någon som vill välja färger är att hämta en populär färgpalett från webbplatser som Adobe Kuler eller ColourLovers. De bidrar, utvärderas och röstas upp av passionerade användare som vanligtvis känner till sin färgfärg. Alla grunderna för färgmatchning och kontrast brukar tas om hand, så det handlar bara om att bestämma vilket färgschema som fungerar i appens sammanhang.
En anmärkning varning dock - var väldigt försiktig om att gå överbord med färg. Du vill inte att de ska överskugga verktyget och användbarheten för din app.
Ett annat bra sätt att skilja mellan element - baserat på hierarki, kategorisering eller visuellt flöde - är att använda olika storlekar. Detta gäller text lika mycket som det gör för bilder, bakgrunder och statiska eller interaktiva element. Du kanske vill lägga större vikt vid den primära åtgärdsknappen, till exempel, och hålla sekundärknapparna relativt mindre tillgängliga. Eller valfria anvisningar kan vara mindre och ljusare än de primära etiketterna i en form.
TeuxDeux appen gör ett briljant jobb med att använda färg för att skilja mellan tidigare, nuvarande och framtida dagar. Eftersom layouten är inriktad mot en arbetsvecka används olika textstorlekar för att se till att namn på dagar är lätta att identifiera, medan datumen är förhållandevis mer subtila.
Eftersom det primära syftet med något användargränssnitt är att möjliggöra för användarna att interagera med appen är det absolut nödvändigt att eleverna intuitivt vet vad de ska göra. Som skapare av gränssnittet är det mycket lätt att glömma att du inte kommer att vara där för varje användare att berätta för dem vad de ska göra. Inte heller har användarna tålamod att läsa manualer och snabbstartguider innan de dykar in med att använda en app. Gränssnittet är nödvändigt för att göra det tydligt klart vilka delar av det som är klickbara, berörbara, draggbara - kort sagt, interaktiva.
Alla vet hur man slår en strömbrytare, eller hur? Den sak som gör det uppenbart för alla att en växel måste tryckas vid en viss punkt för att ändra tillstånd kallas affordance. På den plana ytan på en skärm - stationär, mobil eller på annat sätt - kan olika tekniker utnyttjas för att användarna intuitivt klickar på en knapp eller skriver inuti ett inmatningsfält. När du skapar texthyperkopplingar är det en vanlig fråga om att lägga till en underlinje för länken, men det finns många andra kreativa sätt att göra det.
Här är några exempel:
Kommer du med kopplingsexemplet, hur vet du om flicking switchen gjorde vad den skulle göra? Lampan tänds eller går av, eller i vissa fall hjälper ett ljus inuti omkopplaren att klargöra om strömbrytaren är på eller av.
I en ansökan kan sådan feedback vara mycket uppenbar i fall där en knapp navigerar till en annan sida eller öppnar en popup, men hur är det med situationer där allt det gör är att bearbeta lite data i bakgrunden - som om du sparar ändringar i användarinställningarna? En typ av feedbackmekanism är kritisk för att låta användarna veta att deras åtgärd var framgångsrik. Det här kan vara så enkelt som meddelandet "dina inställningar sparades", en kort meddelande högst upp på sidan eller en snabb markering runt det område som uppdaterades.
När du lägger till en ny uppgift i Kom ihåg mjölken kan den antingen visas i listan på samma sida eller helt enkelt läggas till i en annan lista i bakgrunden (om till exempel uppgiften har tilldelats en annan kategori). Feedbacken för åtgärden tillhandahålls därför på två nivåer:
Texten i din app - allt från logotypen till titlarna, etiketterna och kopiorna - är ditt primära kommunikationsläge med användarna. Eftersom det är hur dina användare får tillgång till information om appen eller genom den, kan du ange vilken typ av skillnad som kan uppstå mellan framgång och misslyckande. Naturligtvis måste titlarna vara större än kroppstext och det fina trycket måste vara bra. men många andra beslut påverkar också hur användarna konsumerar information.
Steg ett: Definiera dina teckensnitt. Det förvånar mig hur många utvecklare helt enkelt aldrig stör att ändra vilket teckensnitt som texten genereras i. Standardfonter ändras från OS till OS och webbläsare till webbläsare, vilket innebär att om du inte uttryckligen anger vilket teckensnitt du vill använda kommer din text att se annorlunda ut i alla operativsystem och webbläsare. Dessutom, Times New Roman - vilket många webbläsare fortfarande använder som standardfontur - är inte bara ett bra typsnitt för skärmavläsning. Min första rekommendation är ofta att använda en sans-serif-typsnitt, även om Georgia eller det nya Cambria-tecknet i Windows 7 också ser bra ut.
Om du bestämmer dig för att använda andra teckensnitt än de säkra, så finns det allmänt tillgängliga som Arial / Helvetica, Georgia, Tahoma etc., så att det finns ett sätt att få dem att göra på samma sätt på alla plattformar. Om Flash är din utvecklingsmiljö, välj embed dem om det behövs. För HTML / JS-baserade appar, använd @ font-face i CSS eller någon av webbtypstjänsterna som Typekit eller Google WebFonts. Kom ihåg att dessa tekniker kommer med ett tillägg av extra filstorlekar för de inbäddade teckensnitt. Om hastighet och lyhördhet är viktigast för dig är det bäst att satsa på basfonterna.
varning: Ja, jag vet att Arial och Helvetica inte är precis lika, men de är lika stora för att de flesta användare inte märker skillnaden.
Mängden utrymme mellan två rader med text är ledande. Du vill att ledningen av din stycktext (linjehöjd i CSS-tal) ska vara minst 140% av teckenstorleken för att se till att den är lättläst. Något mindre och din text kommer att bli mycket svårare att läsa och - mer imporantly - att skanna igenom.
Om du planerar att översätta din app till olika språk - och det borde du verkligen - är det bäst att testa gränssnittet tidigt med olika skript. Den mängd utrymme som ett visst meddelande kräver åtminstone kan variera drastiskt över olika skript. De östasiatiska skripten använder färre ord i genomsnitt men behöver en större teckenstorlek. Indiska (Indikator) skript måste också vara lite större för att kunna läsas och de östliga skripten (som arabiska) går från höger till vänster i stället för vanliga vänster -till höger.
Det handlar om det för nu. Jag hoppas att dessa tips täckte tillräckligt med grunder för att du ska börja tillämpa dem direkt i dina projekt. Precis som i de flesta designrelaterade discipliner finns det inga svåra och snabba regler att följa, och alla har sin egen uppfattning om hur saker ska fungera. Så om du inte håller med något av mitt förslag ovan - eller om du håller med dem men har ett annat perspektiv - låt oss höra om dem i kommentarerna.
Nästa upp tar vi all denna visdom och försöker tillämpa den på ett verkligt gränssnitt. Håll dig igång!
Accentsconagua