Share
Vi har nyligen lagt fram en artikel om den aktuella övergången till surfplattformens påverkan på webbdesign. Detta är ett viktigt skifte för teknikindustrin, men också för webbdesigners som nu uppmanas att överväga tablettplattformen för kompatibilitet. Men samtidigt finns det ett annat skift: en övergång från muscentrerade gränssnitt till de som är inriktade på appar.
En webapp är, för att uttrycka det enkelt, ett program som bygger på en internetuppkoppling för att fungera. Inget lagras lokalt och allt är uppe i molnet. Det finns ett antal fördelar med det här: allt är tillgängligt överallt, det finns liten prestanda oro, hårddiskfel betyder inte förlust av arbete och de flesta är plattformen. Därför är applikationsutvecklare ett attraktivt förslag som kan innebära att appar finns tillgängliga för ett större segment av deras potentiella publik.
Det finns en distinkt skillnad mellan en web app och en webbwebbplats. Men den debatten är inte ämnet i artikeln. I stället tittar vi på ett annat skifte i webbdesignen, eftersom app-centrisk multiplattformsdesign blir mycket mer populär och allt från navigering till former påverkas.
Detta är kanske den största betydelsen i detta skifte. I fallet med någon app är det nödvändigt att vara så enkelt som möjligt för att inte överdriva en användare. Ändå har varje app ett syfte och ett mål att uppnå efter användarens interaktion. Därför måste webapplikationer koncentrera sig på nyckelfunktionerna mycket mer än en vanlig webbplats.
Hemskärmen på Facebook när den loggas ut. Denna betoning är uppenbar inte bara inom webbapps själva, utan även på deras stänksidor före en inloggning. Om vi tar Facebook som ett exempel är den största delen av sidan registreringsblanketten eftersom det är vad den primära sidan är tänkt att göra: få fler användare.
Det finns också en sekundär, användarorienterad spin på denna teori. Till exempel, om någon fyller i ett formulär på webbsidan, är det en liten chans att de kommer att vilja återställa det formuläret. Chansen att de stavar sitt namn rätt första gången är större och därför borde det finnas större tonvikt på inlämningsknappen.
ThemeForests inloggningsformulär har en ganska stor inbjudningsknapp eftersom det här är den åtgärd som de flesta användare vill ta. Men det finns också länkarna "Glömt lösenord / användarnamn" för dem som behöver dem, men de är mindre.
Denna idé är en belastning av visuell hierarki genom att huvudmålet för en viss webbsida är det mest framträdande och märkbara elementet på den sidan.
En annan konsekvens är en ökning av en viss utformning av webbapps själva. Har du någonsin stött på en webbplats som ser ut att den borde höra till din dockningsstation (eller Startmeny om du är på Windows)? Tja, det finns en hel del exempel som gör att en webapp verkar infödd över plattformar på ett elegant sätt genom att använda en mängd trevliga gradienter och skuggor.
Det är inte bara detta som är uppenbart i webbprogram som syftar till stationär användning, men också i mobil. Många mindre utvecklare väljer att skapa mobila webbapplikationer över inhemska appar för att spara på kostnader och inlärningskurvor. Inte bara fungerar den här metoden med att skapa originala webbapps, men även tematiska populära som WordPress (som den här MobileTuts + -sessionen beskriver).
Visa användaren vad han behöver, inte allt han inte gör.
Det var en tid där, om du vill utföra en åtgärd i en komplex webapp, måste du rulla runt och gå igenom flera olika "nivåer" innan du uppnår en sådan sak. Men med kontextspecifik navigering är denna process mycket enklare. Den allmänna teorin bakom det är att en användare inte behöver tillgång till alla alternativ vid varje tillfälle och att endast de som är relevanta för sin nuvarande situation ska visas.
Denna typ av scenarspecifik navigering uppnås vanligen genom användning av navigering på andra nivåer. Den närmaste icke-webbaserade analogi jag kan komma med är mot Microsoft Office och hur det använder en bandlayout för användbarhet. Nyckelavsnitt är titlade och med ett enkelt musklick visas alla relevanta alternativ.
Ett enkelt sätt att summera upp detta är att visa användaren vad han behöver, inte allt han inte gör. Och samma kontextbaserade teori kan appliceras på andra element som popup-modalboxar som visar att element endast krävs om användaren vill ha det.
Microsoft Office är ett exempel på utbredd användning av en kontextuell meny. Det här verkar som en del av att komma ner från de ämnen vi diskuterat tidigare, men dessa tre faktorer kan ha stor inverkan på en webbdesign. Lägga till skuggor på en knapp, till exempel, gör det popup och kom nästan ut som en design som inte längre är platt.
Tänk på att lägga till skuggor i ett modalfönster och titta på hur det skapar en känsla av definition mellan det ursprungliga innehållet och den nya ramen. Bara det kan göra en webbplats ser mer interaktiv ut eftersom det blir flera lager som en inbyggd app. Tänk sedan på effekterna som innehåll förändrar opacitet under olika omständigheter för att skapa en övergripande ny dimension till innehållet själv.
Val av gradienter kan också ha en bestående inverkan på en slutlig design. Precis som gradienter bygger upp, skjuter designen bara "mer" och verkar 3D när den används i samklang med inre skuggning.
Lägg märke till hur rätt bild ser ut som den har två lager, medan den vänstra inte gör det. Eftersom en webbapplikation är avsedd att fungera som en mjukvara som körs lokalt, är en känsla av allt som arbetar tillsammans avgörande. Och de främsta sätten utvecklare kan kommunicera denna mening är genom design. Jag skulle utmana dig för att hitta mig en webbapplikation som är hela användargränssnittet är uppbyggt med rena stock HTML-element utan egen styling.
Du kan inte? Ingen överraskning där! Faktum är att webbdesign är avsett att ha en konsekvent styling överallt och i webbapps, är användningen av kontroller och ingångsområden stora element att överväga. Något som är så enkelt som att lägga till en anpassad bakgrundsfärg och skriva över gränsen för en inmatningsknapp kan göra en stor inverkan i enhetens design.
Lägg märke till i GMail skärmdump hur bara stilering av nyckeln faller ner menyer och knappar "bara passa in" med den övergripande designen. Åh ja, jag har en order frakt från Angry Birds Store! ; P
Återställande av beståndsdelar är en sak, men att skapa nya är ännu bättre. Ta MyBankTracker som ett exempel som använder en anpassad glider som fortfarande passar in med sin övergripande vita och blå design.
Samtidigt som jag undersökte något alternativt perspektiv på webbappdesign, hittade jag ett intressant citat från nuvarande Microsoft Office Marketing Exec, Chris Capossela, där han sa något i linje med: "När vi frågade [vilka funktioner användarna ville ha i] Office, nio gånger av tio namngav de något som redan finns i produkten, de kunde bara inte hitta den ". Den här typen av länkar går tillbaka till hela situationen - optimerad navigationsidee.
När vi frågade [vilka funktioner användarna ville ha i] Office, nio gånger av tio, namngav de något som redan finns i produkten; de kunde bara inte hitta den.
Faktum är att om du försöker ställa in många funktioner i ett litet utrymme blir varje funktion mindre betydelsefull. Och användaren kommer att spendera mycket längre efter den funktion de vill ha. Och användaren kommer bli frustrerad. Och användaren kommer att lämna. Du vill inte ha det här. För att förbättra detta, försök minska skärmens upplösning så lite som möjligt och starta den mest användargränssnitt som du har installerat. Försök och använd det och du kommer att fånga min drift därefter.
Ett ytterligare förslag är att lyssna på dina användare, men inte för mycket. Eftersom användare begär fler och fler funktioner kan du bli benägen att bara kasta nya alternativ här och där.
Flytta bort från vad du ska / kan använda, låt oss gå över bara tre viktiga saker du borde inte gör när du arbetar med ett appcentrerat användargränssnitt.
Tänk dig att träffa någon på gatan. Du frågar dem var närmaste Starbucks är och de svarar på ett annat språk. Du verkar hämta på ett ord som du uppfattar vara en kognitiv, men det visar sig vara fel och det har en fullständigt förvrängd mening. Det här låter lite långvarigt för en anologi, men den punkt jag försöker stressa är att du kan uppfatta något på grund av din naturliga språk, men konstruktören kan rikta sig till något helt annat. Om du till exempel genererar rubrikerna för att se ut som knappar kan användaren försöka klicka på den och tro att den är en del av webbappen och kan fortsätta bli frustrerad när det saknar funktion och förvirrande upplevelse.
Mitt första inlägg här på WebDesignTuts + diskuterad formvalidering och det är viktigt för användarna. Som användare skulle jag vilja veta vad jag gör fel om jag inte kan arbeta med din app och det är alltid lämpligt att bygga in utrymme för feedback från början.
Design inkonsekvens är en frustrerande upplevelse som, precis som en användare får brukade vara ett sätt att göra saker, konfronteras de med en annan. Ett mycket enkelt exempel är på Expedia där den avgående och återkommande kalenderen byter månader när du väljer ett datum.
Här är en kort lista över sex webbplatser och webbapplikationer som tydligt visar några av de designprinciper vi har diskuterat i den här artikeln från inbyggd appdesign till nyckelfokus.
För att sammanfatta denna artikel finns det ett tydligt inflytande på webben från traditionella, inhemska applikationer. Men varje designbeslut som innebär webbapps beror på användbarhet. Ansökningar måste vara enkla, de måste ha tonvikt på nyckelfunktionerna så att en användare passerar webbplatsen med lätthet.
.
Accentsconagua