onsdag den 27. november 2013

Design til touchskærm: RTS

Vi fik stillet til opgave at forsøge os med at lave et intuitivt design for RTS' hjemmeside så den også ville kunne fungere på skærme med touch-funktion. Mit eksempel er lavet til opretstående tablets, men ville også kunne koges videre ned til mobil.

Det er vigtigt at links er store nok at klikke på, at du ikke får trykket på noget du ikke ville til at starte med. Jeg har derfor beholdt forsidens knapper til de forskellige sektioner af uddannelserne, da jeg mener det er en af de vigtigste komponenter på hjemmesiden, foruden undermenuerne med mere information.

Farveskemaet er holdt i de blå nuancer som er i logoet, dog lidt mørkere for at skabe form og kontrast til den kolde hvide baggrund. Jeg følte dog det var nødvendigt at sitet var meget rent og klart, og at der ikke var alt for meget til at forvirre brugerne på sitet.

I over-menuen er der en enkelt knap som, med en dropdown, vil indeholde alle de hovedpunkter fra menuen på sitet. Når du trykker dig derind vil du have mulighed for at læse om de forskellige punkter der er til at finde i menuen på sitet men som anchor-punkter på den valgte under-menu.

Selve tekstområdet er til højre side og vil have scroll-funktion hvis der står mere tekst på siden end der kan displayes. Side og overmenuen vil dog ikke rykke sig.
De vigtige elementer såsom linksne i venstre side er hele elementer man kan trykke på og ikke blog tekst eller et billede der er et link. Dette er for at undgå forvirring over hvorhenne man skal trykke - brugeren vil kunne trykke på begge dele af det valgte element og komme videre.

Informationsboksen i venstre bund vil heller ikke flytte sig men vil ikke fungere som et link. Det vil dog være konstant på alle sider, som side-menuen.

I en mobil version ville sidebaren være minimeret til iconerne. Hvis ikke brugeren var bekendt med hjemmesiden ville det tage lidt for brugeren at finde ud af hvad de forskellige ikoner gør, men da det er et hurtigt site ville det ikke være noget problem at udforske elementerne.

Samme farvekomponenter og opbygning, samme type menu etc. Siden sitet er responsive forstår den at fjerne teksten fra side-menuen og info-boksen fra venstre hjørne.




Links brugt:
Design for touch-screen
RTS: EUX
RTS

Ingen kommentarer:

Send en kommentar