UXD

Arbejder du med MS Office har du sikkert lagt mærke til flere af disse cursors, som via deres form er med til at indikere hvilke interaktionsmuligheder du har (cursor affordance). Denne måde at visualisere hvad du kan ved hjælp af musen er jeg stor tilhænger af.

Vi ved at folk ofte bruger musen til at undersøge et interface med, derfor er det også oplagt at udnytte denne viden til at synliggøre ting der ellers kan virke skjulte.

I Photoshop har du traditionelt en slider til at indstille opacity med. Men kører du musen hen over lablen Opacity vil du opdage at musens markør skifter til en hånd med to små pile. Du har nu de samme muligheder for at indstille opacity uden egentlig at have fat i selve kontrollen. En lækker UI detalje der gør arbejdet med opacity meget hurtigere.

Så designer du software hvor visse elementer virker lidt for hemmelige er det måske værd at overveje om en custom cursor kan være en hjælp til dine brugere – til bedre at se deres interaktionsmuligheder.

Virker disse billeder bekendte? Men er du i tvivl om hvordan du får dem udskiftet med dit eget billede? Så læs med her og bliv samtidig klogere på hvordan du bruger din Gravatar til personlig branding.

En Gravatar (Globally Recognized avatar) er kort fortalt et billede der følger dig over alt på nettet hvor du bruger din e-mail, selvfølgelig forudsat at de hjemmesider og blogs du besøger anvender Gravatars.

Brugen af Gravatars er en fremragende måde at arbejde med personlig branding på. Jo flere blogs du besøger der anvender Gravatars, jo flere steder dukker dit profilbillede op.

Bruger du forskellige e-mails kan du koble forskellige billeder til de enkelte e-mails. Men husk, at hvis du bruger det samme billede overalt så er du nemmere at genkende og du har nemmere ved at styrke dit personlige brand, end hvis du bruger forskellige billeder.

Personligt synes jeg brugen af Gravatar har den fordel, at vi slipper for alt for mange anonyme kommentarer. Vi får ansigt på dem vi chatter med og det føles på en måde mere som en samtale.

Derudover tror jeg at Gravatars langt hen ad vejen er med til at holde en god tone, da vi netop sætter ansigt på og således står mere ved det vi skriver.

Sådan får du selv en Gravatar:

• Gå til gravatar.com
• Sign Up øverst på forsiden
• Følg linket i aktiveringsmailen
• Upload dit billede

Hver gang du bruger denne e-mail vil dit billede nu automatisk dukke op på de blogs der anvender Gravatars – det gælder iøvrigt også alle de blogs du tidligere har besøgt med denne e-mail adresse.

For nylig var jeg via min iPhone en smut forbi DK-hostmaster for at genoprette et suspenderet domæne. En process der kræver at du udfylder en formular med 11 felter.

Det burde være så lige til men faktisk var det ret irriterende. Problemet med formularen er at alle labels står til venstre for input-felterne, hvilket gør at de forsvinder når man ‘tabber’ ind i et af dem for at skrive (da mobilen zoomer ind på det felt man har valgt).

Jeg kunne selvfølgelig ikke huske alle 11 labels hvilket gjorde at jeg flere gange måtte zoome ud og ind for at komme igennem formularen.

Måske det er på tide med en mobil udgave? Eller måske DK-Hostmaster (og sikkert rigtig mange webshop ejere) i det mindste bør overveje at optimere deres formularer så den mobile oplevelse bliver bedre.

Én mulighed for at forbedre formularen er at placere labels over inputfelterne. Det gør det nemt at udfylde felterne fra en mobil fordi labes altid er synlige.

En anden mulighed er at bruge indlejret labels som vi efterhånden ser mere og mere. Et problem med de indlejrede labels kan dog være at aflæse felterne når formularen er udfyldt.

Et god tip til at komme dette til livs fik jeg af en kollega som viste mig eksemplet ovenfor hvor Ally Creative har valgt at supplere felterne med ikoner så de er nemmere at aflæse efter de er udfyldt.

En lækker UI detalje ved iTunes på iPhone er Apples måde at udnytte den begrænsede plads. I eksemplet herover udnyttes den venstre side af cellen i table view’et først til et cover, derefter til en preloader og endelig som en afspiller med timeline – nifty.