Idag ska vi undersöka 15 bitars användargränssnitt och uppleva design som verkligen ökar erfarenheten av att använda en webbplats eller applikation.
Använd dessa hemsidor, iPhone och skrivbordsapplikationsexempel som inspiration för att skapa dina egna unikt beroendeframkallande användarupplevelser.
Introduktion
Det här inlägget kommer att fungera som mitt eget lilla gränssnitt. Det är en komplett hodgepodge av olika typer av gränssnitt och element som jag tycker är användbar och inspirerande.
Varje exempel är att du ska tänka på nya möjligheter som du aldrig har övervägt och uppmuntra dig att alltid försöka maximera värdet av den erfarenhet du ger till dina användare.
Side-Scrolling Parallax Effekt
Denna lilla bit är rent visuell överflödig flare, men den verkliga ökar upplevelsen av en sidoskrivningsplats.
Parallax rullning är en effekt där bakgrunden skivas upp i olika lager som rör sig med olika hastigheter under en rullning. Skikten flytta sig långsammare än lagren i närheten och en 3D-illusion skapas.
Charlie Gentles portfölj ovan är ett utmärkt exempel på denna effekt. Webbplatsen är indelad i separata sektioner, tillgänglig genom att klicka på fram och tillbaka knappar på sidan av skärmen.
När du klickar på en knapp rullar webbplatsen smidigt till nästa avsnitt, vid vilken punkt parallax-effekten slår in med bokeh längst upp på skärmen. Det är ett enkelt trick som verkligen gör webbplatsen levande.
iPhone Dra ner för att uppdatera
De flesta sociala iPhone-appar har något system för att uppdatera sin dataström. Några du skakar, andra du knackar på en knapp, men den metod som verkligen verkar ge mig mest mening är att dra ner för att uppdatera.?
Appar som Gowalla, Foursquare och Tweetie har antagit detta som det primära sättet att uppdatera. Anledningen till att detta fungerar så bra är på grund av interaktionen direkt. Du tittar på och bläddrar genom en lista med ditt finger och när du vill att den ska uppdateras, borde du inte behöva lämna det området.
Om du placerar en knapp på någon annan plats på skärmen skapas en avbrytning och en paus i flödet av användaråtgärden. De måste lämna listan, interagera med en separat användargränssnitt och återvända till vad de gjorde. På så sätt är det all en åtgärd, lokaliserad på en enda primärplats.
Läran här är att undersöka dina egna användargränssnitt för element som bryter uppflödet av användarens uppmärksamhet. Överväga huruvida gränssnittet kan förbättras genom att integrera några avlägsna element i det område som de påverkar.
Globalt åtkomliga HUDs
Några av mina favorit Mac-applikationer är de som tyst körs i bakgrunden, men kan dyka upp med ett ögonblick med en speciell tangentbordsgenväg och försvinna sedan när du är färdig med dem.
När det gäller hitlistan är heads-up-displayen (HUD) inte huvudgränssnittet för applikationen utan snarare en nedskalad bit av appen som är användbar för att jocka ner objekt som dyker upp i ditt huvud.
Denna typ av global (åtkomst från var som helst) funktionalitet gör att dessa verkar mindre som applikationer och mer som funktioner som byggs direkt i mitt operativsystem.
Tänk på hur du kan använda HUD i dina egna gränssnitt för att utöka funktionaliteten hos vissa delar av dina applikationer och webbplatser.
Convertbot cirkulära menyer
Convertbot är ett av de få exempel på UI-design som är möjligen svårare att använda samtidigt som det är mycket roligare.
Denna iPhone app använder en konstig men vacker cirkulär meny för att konvertera grundläggande enheter. Det finns gott om appar i iPhone App Store som utför den här uppgiften på ett mycket mer direkt och lättförståeligt sätt, men de är inte heller roliga att använda.
Med Converbot sitter på min iPod tittar jag ständigt ut för scenarier som gör att jag kan dra ut appen. UI har smarta animationer, underbara färger och texturer och smidig funktion som bara gör det till en glädje att använda.
Den här appen visar att det i sällsynta fall ger användarna motsatsen till vad de förväntar sig kan vara precis vad gränssnittets läkare beställde. Se bara till att du har designens skicklighet för att säkerhetskopiera det som killarna på Tapbots självklart gör.
SlideDeck
Det finns ingen brist på jQuery-reglage på webben, men det finns några som verkligen skiljer sig från de andra som en användbar och unik implementering. SlideDeck är en av dessa.
SlideDeck använder ett snyggt dragspelformat för att ställa in massor av information till ett fantastiskt litet, organiserat och fullt åtkomligt utrymme. Innehållet är uppdelat i sektioner som sedan döljes i vertikala staplar som expanderar när de klickas på. När en sektion expanderar, kollapsar den tidigare öppna sektionen i en fin, flytande animering.
Det som gör det så bra är hur lätt det är att komma på precis den högra delen av bildspelet du vill se. Dessa typer av reglage använder vanligtvis små ikoner eller prickar för att hoppa till specifika sidor, men den här metoden är mycket mer beskrivande och uppenbar.
Strongbad Emails: Gå Rando!
Först och främst, om du inte vet vem Strongbad är, skäms på dig. Han är överlägset den mest populära karaktären på den långvariga internettecknad som starter Homestarrunner och hans vänner.
Varje vecka svarar Strongbad ett e-postmeddelande från en tittare och ultimata hilaritet följer. Tidigare episoder hålls i en enorm otrygg lista som du rullar igenom, eftersom Strongbad sjunger sin senaste sång om att rulla.
Nyligen har utvecklarna lagt till en? Go Rando? knapp. Om du klickar på det här lilla textstycket kan du bara ha tagit dig till ett slumpmässigt email, men det var inte tillräckligt bra för Strongbad. Istället med att klicka på den här knappen sätter hela listan ihop som Wheel of Fortune (komplett med avmattning och stopp) medan Strongbad ger de häftiga ljudeffekterna.
Självklart är det så helt fantastiskt att du måste använda det flera gånger innan du kan överväga att du är klar.
Poängen är att ibland sätta lite tankar (och till och med komedi) i din minsta funktion kan omvandla den saken till allas favoritfunktion på din webbplats. Vidare är det säkert att använda din webbplats för att få och behålla användare.
Gjord av Tinder Color Picker
Tinder är något super hemligt att brandmarknadsnätet har skjutit upp ärmen. Även om jag inte har någon aning om vad det är, älskar jag den lilla teaser sidan som de har utvecklat.
De små rektanglarna längst upp på skärmen ger dig sju olika färgscheman för att visa webbplatsen. När du klickar på en färg ändras bakgrunden och innehållet på sidan uppdateras för att maximera kontrast på den nya bakgrunden.
Jag har tillbringat mer tid än jag erkänner på denna sida och leker med de snygga lilla knapparna. Hats off till bränsle laget för att skapa en av mina favorit kommer snart sidor någonsin.
Pixelmator: Strings Attached
Pixelmator är ett utmärkt och prisvärd bildredigeringsalternativ till Photoshop. Även om inte lika kraftfull, ger Pixelmator massor av innovation till bordet och billigare än någon Photoshop-konkurrent jag någonsin har stött på.
En av mina favorit UI-funktioner i Pixelmator är dessa små hängande strängar som dyker upp när du tillämpar effekter. I det ovanstående fallet kan du dra punkten för att placera om mitten av effekten som appliceras. Poängen är kopplad till den här strängen som binder den till filterfönstret. När du flyttar punkten studsar strängen tillsammans för att rida med realistisk fysik.
Jag ser verkligen inte ens ett behov av att dessa små strängar existerar, eftersom det är uppenbart att fönstret och effekten är relaterade, men deras närvaro tjänar som en fin visuell förstärkning av detta faktum och gör att applicera filter bara så mycket roligare.
Enorma Hover Effects
Nästan varje webbplats du besöker har någon form av svävarhändelse som tillämpas på länkarna. Vanligtvis är detta något litet och inte alltför distraherande; bara tillräckligt för att berätta för oss att det finns en länk där.
Riot Industries beslutade med rätta att de behövde bryta den här trenden genom att ge svävan effekten större delen av utrymmet på sidan och länken en liten mängd utrymme.
När du svävar över den lilla vertikala remsan av miniatyrer börjar den stora texten till höger zooma upp och ner. Den körs och träffar överst på skärmen, där det blinkar till ett nytt meddelande som motsvarar ikonen du svävar över och kör sedan ner igen för att stoppa bredvid den ikonen.
Jag har aldrig sett en annan webbplats med en effekt som den här förut och jag älskar verkligen den typografi-centrerade funktionaliteten av allt.
Dra och släpp på nätet
Som en ivrig Mac-användare tenderar jag att tro att allt i livet borde fungera med? Dra och släpp? funktionalitet. Mer och mer nyligen ser jag denna idé som speglad i en online-miljö.
I exemplet ovan kommer att klicka på en ikon för dig till den programmets dedikerade sida. Men om du vill kringgå detta och ladda ner programmet direkt, drar du helt enkelt appens ikon till nedladdningsknappen. Nifty nej?
En annan plats som du ser bra dra och släpp funktionalitet på nätet finns på ikonet IconDock. Här drar du bara ikonerna du vill köpa till dockan för att hålla dem för köp senare.
Photoshop.com Photo Pile
Detta är ett annat exempel som är verkligen funktionellt meningslöst men representerar en fin tillagd touch som kommer att hålla besökare intresserade av längre tid.
När Photoshop.com-sidan laddas, släpps en hög med polaroider på skärmen och studsar i alla riktningar. Stapeln blir då helt interaktiv. Du kan klicka och dra områden på skärmen för att kasta bilder vildt om och titta på när de kraschar in i andra.
Fysiken verkar fungera ganska bra och hela saken lägger definitivt till stor interaktion med sidan.
Följ musen
Webbplatsen nedan är en annan som har en bra parallax-effekt, men den här gången vill jag fokusera mer på hur du interagerar med den här scenen.
Så snart du laddar den här sidan inser du något konstigt pågår. När du flyttar markören åt vänster och höger reagerar bakgrunden som om du rörde huvudet. När sidan pannar till sidan, avslöjas mer av landskapet.
Även om det inte är lämpligt på de flesta sidor, fungerar denna unika metod för att titta runt, riktigt bra här, och bidrar verkligen till 3D-effekten. Jag har även sett andra webbplatser som tar den här metoden ytterligare genom att göra det till det primära sättet att navigera på allt innehåll på sidan.
Dual Slider
Den här är en annan jQuery-skjutreglage som verkligen utmärker sig som en unik strålande design.
ThemeForest WordPress-mallen ovan har en slags dubbelbildsreglage. Den första reglaget innehåller bilder och den andra innehåller beskrivningar av bilden.
När bildreglaget rör sig vertikalt rullar beskrivningsreglaget horisontellt. Den resulterande effekten liknar att titta på en komplex maskin; De två animationerna känns som om de är en enda funktion.
Det är ett utmärkt sätt att visa upp bilder och text som verkligen lämnade mig bedövas och vill ha mer.
Rullar med Momentum
När jag först fick händerna på en iPhone för några år sedan blev jag omedelbart förälskad i tanken på momentumbaserad användarinteraktion. När jag pekade på fingret i Safari var det inte ett rörelseförhållande 1: 1, snarare enheten använde min flicka som om jag faktiskt flickade ett papper som skulle bygga momentum, topp och sedan sakta ner baserat på kraft av min handling.
Ända sedan dess har jag velat ha mer teknik för att plocka upp den här idén, särskilt OS X. Lyckligtvis har Apples Magic Mouse fört med det där.
Genom att slå på? Bläddra med fart? Du kan efterlikna iPhone-rullningsfunktionen. Flickar ner på en iPhone gör skärmen dock nere medan du pekar på en Magic Mouse så att skärmen går upp. Det här är vettigt på grund av musens indirektitet, men jag önskar fortfarande att du kan ändra muspekfunktionen för att spegla iPhone.
Läran här är att när som helst du kan kasta i en verklighet till en simulerad användarupplevelse, ökar tittarens åsikt och det verkar som allt mer magiskt (se nu, jag låter som en Apple-anställd).
Verkligen Minimal
Även om jag älskar vackert komplexa gränssnitt finns det tillfällen då du bara behöver vara produktiv med dina tankar och nästan inget annat. En gång i taget följer ett gränssnitt som verkligen naglar denna idé, och jag kan inte tänka mig bättre än WriteRoom for Mac.
Trots sitt utseende är WriteRoom en ganska kraftfull textredigerare full av funktioner och anpassningsalternativ. Det döljer bara allt detta under ett vackert enkelt gränssnitt som gör att du känner att du skriver i siffror i en lucka på LOST.
Så galen som det låter, det här är den typ av användarupplevelse som jag tycker mest missbrukande. Något unikt och nedsänkt som nästan tar dig bort till en annan tid och plats där allt faller iväg och du kan fokusera helt på uppgiften till hands.
Slutsats
Jo det är min lista med inspirerande element och gränssnitt. Jag hoppas det hjälper gnista några bra idéer i ditt huvud om hur man ytterligare förbättrar dina egna mönster på både stora och små sätt.
Använd kommentarerna nedan för att berätta om de små bitarna av användargränssnitt som du tycker är riktigt bra och vad du tycker om exemplen ovan.