Tværkulturelt Design
Japansk version af Elgiganten
Formål
At få en forståelse for det japanske marked, og hvordan deres hjemmesider er sat op i forbindelse med layout og information.
Min rolle
- Brugerresarch & kulturel tilpasning
- Prototyping i Figma
- UI-design
- Designbeslutning & dokumentation
Proces
Der er blevet arbejdet med en iterativ proces, og derfor er der ikke blevet benyttet wireframing.
Resultat
Der er forskel på det japanske hjemmeside-layout afhængigt af, hvilket marked man kigger på. Den danske oversættelse af den japanske version viser tydeligt, hvor let-navigerbar det elektroniske marked faktisk er i forbindelse med hjemmeside-layout.
Refleksion
- Japansk hjemmeside-layout
- Japansk farveteori
- Japansk typografi
Farveteori
Europa
Primærfarve: Blå
Blå betyder seriøsitet, tillid og corporate. Benyttes typisk som primærfarve for brandidentiteten. En europæisk side ville være meget mere monokrom med blå-hvid, for ikke at virke “for meget”.
Sekundærfarver: Rød og gul
Rød signalerer fare, advarsel eller rabat, men kan også hurtigt virke aggressiv. Derfor bruges rød i EU-design kun til meget få highlights (stor rabat eller “haster”).
Gul bruges mere sparsomt, ofte til at fremhæve tilbud, men typisk i en lidt dæmpet version (ikke neon-gul). For meget gul og rød sammen ville i Vesten ligne discountbutik fremfor elektronikgigant.
Hvid og grå
I Europa ville man bruge meget mere white space og eventuelt en neutral grå til at adskille sektioner. Eksempelvis yamada-denki.jp, der bruger mange forskellige farver – der ville en europæisk side “ånde” mere.
Kontrast
Kontraster bruges mere kontrolleret – rød måske kun på knapper, gul er slet ikke fast (bruges typisk på tilbud), blå/hvid er basen. Det ville virke for stressende for en europæisk bruger at have mange konkurrerende farver.
Hierarki
Blå = Primærbrand, hvid/grå = baggrund. Rød ville kun markere nøglekampagner i små mængder. Man ville ikke fylde forsiden med røde bannere – det ville blive opfattet som “overkill” eller “useriøst”.
Overflod af farver
Ville skabe forvirring, føles rodet. Man forventer en renere og minimalistisk visuel hierarki, hvor farver guider øjet.
Kulturel kontekst
Rød er ofte fare, stop, rabat. Hvis hele forsiden er rød, ville det føles alarmerende.
Gul kan hurtigt føles “billig discount”, især hvis kombineret med rød (tænk Netto, Lidl eller Harald Nyborg).
Blå/hvid signalerer seriøsitet og kvalitet, så det er dér europæiske sider ville holde deres fokus.
Japan
Primærfarve: Blå
Blå signalerer seriøsitet, troværdighed og stabilitet. Det er meget tilsvarende som i Vesten.
Sekundærfarver: Rød og gul
Rød er en meget positivt ladet farve: energi, handling, held. Derfor bruges det til at fange opmærksomhed på “store deals” og kampagner.
Gul understøtter rød, giver en følelse af hurtighed og presser på urgency-effekten (“køb nu, det er vigtigt”).
Hvid og grå
Bruges som baggrund til at skabe luft mellem de mange farver. Det gør det lettere at læse alt det farverige indhold.
Kontrast
Stærk rød/gul mod den blå/hvid for at skabe energi og råbe efter opmærksomhed.
Hierarki
Rød = “Køb nu!”, Blå = navigation og struktur.
Overflod af farver
Acceptabelt, normalt, skaber energi.
Kulturel kontekst
Rød er held, fest, energi.
Blå er ren, pålidelig.
Gul er livlighed.
Japansk webdesign & layout
Da jeg undersøgte japanske e-commerce websites, lagde jeg hurtigt mærke til, at layoutet adskiller sig markant fra det vestlige design. Hvor mange danske og europæiske hjemmesider prioriterer luft, minimalisme og store hero-billeder, bygger japanske sites ofte på en informationsrig og kompakt struktur, hvor brugeren præsenteres for mange elementer på én gang.
Det første, man bemærker, er tætheden af information. Hver sektion er visuelt pakket med bannere, tekstbokse og grafiske elementer, som alle formidler særskilte tilbud, kampagner eller tjenester. Denne overflod af visuel stimuli er ikke tilfældig, men afspejler en japansk designkultur, hvor brugeren forventer at blive informeret direkte og hurtigt kunne navigere til præcise tilbud uden at skulle klikke for meget rundt.
Et andet markant træk er den visuelle hierarkisering gennem farvebrug og tekststørrelser frem for whitespace. Store, farverige overskrifter og knapper skaber rytme i layoutet og leder øjet gennem indholdet. Der bruges ofte primærfarver som rød, gul og blå for at skabe energi og handlekraft
Sammenligning mellem de to versioner
Kigger man på det generelle layout af hjemmesiden, så er den ikke så anderledes fra det europæiske design. Jeg har forsøgt at benytte elementer fra forskellige japanske hjemmesider, og derfor ligner det ikke nødvendigvis det billede fra sidste del.
Layoutet her har en opsætning, der ikke er så anderledes fra det vi er vant til. Det jeg kunne se gennem min research er, at hjemmesidens layout afhænger af, hvilket marked hjemmesiden er en del af.
Eftersom vi i det elektroniske marked, så har jeg ikke benyttet den fra sidste del. En kammerat fra Japan anbefalede Biccamera netop fordi den er en el-gigant i Japan, så den minder meget om Elgiganten.
Deres layout er meget tilsvarende til de man ser her, og nogle af elementerne er taget direkte derfra.
Da jeg lavede oversættelsen af den japanske hjemmeside, der kunne man hurtigt se, hvad der faktisk gjorde den en smule uoverskuelig for mig, en europæisk bruger. Det er netop de japanske tegn.
Den danske oversættelse af hjemmesiden viser tydeligt, hvor normalt et layout deres el-marked faktisk har. For der er mindre støj, selvom det er det selvsamme indhold – forskellen er bare at det nu er læsbart.
Selvom det giver sig selv, at hjemmesiden ikke (nødvendigvis) er navigerbar for en europæisk bruger, så synes jeg alligevel man skal tage imod sammenligningen – for den viser samtidig hvor stor en betydning typografi og sprog kan have for en bruger.
Jeg har ikke nået at lave nogle nye farvevarianter til prototypen, men det kunne have været spændende at se, hvordan andre farver en Elgigantens kunne spille ind her.
Ved at bruge en rød som primær farve får hjemmesiden pludselig et helt andet udtryk – og så kunne man begynde at benytte den japanske farveteori. Man er naturligvis tvunget væk fra Elgigantens brand-farver.
Interaktiv mobil-app prototype
Rocket League Tips & Tricks-app
Formål
At opbygge en app med fokus på branding, mikrointeraktioner, ergonomi og Target Touch Size.
Min rolle
- Research & konceptudvikling
- UI-design
- UX-design
Proces
Jeg har arbejdet iterativt for at fremskynde designprocessen og kommer i gang med kreativiteten.
Der er ikke blevet benyttet wireframing.
Resultat
En app, der har fokus på brugeroplevelsen gennem mikrointeraktioner og animationer.
Refleksion
- Mikrointeraktioner
- Animationer
- Components & Variables
- Boolean (Union)
- Target Touch Size
- Material Design
- Transitions
Target Touch Size & Material Design
I min prototype til en Rocket League “Tips & Tricks”-app har jeg haft stort fokus på at følge Googles Material Design-principper og sikre korrekt Touch Target Size. Jeg har designet hele brugeroplevelsen i Figma med udgangspunkt i, at appen skulle være nem at navigere, visuelt sammenhængende og responsiv ved berøring.
Jeg har arbejdet aktivt med Touch Target Size ved at designe store og let tilgængelige trykflader gennem langt størstedelen af layoutet. Alle kort under sektionen “Tutorials” er klargjort til (fører ikke videre til noget lige nu), at fungere som selvstændige tapbare områder med både billede og tekst, hvilket giver et bredt, sikkert interaktionsfelt. De overholder dermed den anbefalede minimumsstørrelse på 48×48 dp, som sikrer, at brugeren nemt kan ramme elementerne uden fejltryk.
Tilsvarende er FAQ-listen opbygget af store, afrundede paneler med rigelig indvendig padding og afstand mellem hvert element. Det giver en behagelig rytme i layoutet og reducerer risikoen for at ramme forkert, netop fordi man kan trykke på hele panelet.
Ved selve navigationsbaren i bunden har jeg desuden placeret ikonerne med god afstand og tydelig selektionsindikator, så de kan anvendes komfortabelt med én hånd (ergonomisk).
Derudover har jeg arbejdet bevidst med Material Design som visuel og funktionel ramme. Appen benytter en klassisk struktur med en topbar, et kortbaseret indholdsområde og en bottom navigation, hvilket følger Material Designs anbefalede navigationsmønstre.
Hvert kort er designet med afrundede hjørner, skygge og let elevation for at skabe dybde og adskille indholdslagene – hvilket er et centralt kendetegn ved Material Design.
Jeg har brugt et konsekvent farvesystem, hvor Rocket Leagues blå tone fungerer som primærfarve og bruges til at understrege interaktive elementer og aktiv navigation, og jeg benytter også gerne deres sekundære orange farve ved mulighed.
Typografien er opbygget efter Material Designs hierarkiske principper, hvor der er tydelig forskel på overskrifter, undertitler og brødtekst. Det skaber en naturlig læseretning og gør det lettere for brugeren at skimme indholdet. Jeg har samtidig arbejdet med et konsekvent system til former, hvor de samme afrundede hjørner og luftige layouts går igen i både kort, FAQ-elementer og knapper. Dette giver et sammenhængende og moderne udtryk, der føles genkendeligt og roligt at navigere i.
Konklusion
Samlet set har jeg brugt Material Design som et fundament til at skabe et konsekvent og brugervenligt layout, der overholder principperne for touchvenlig interaktion. Store tapzoner, tydelig visuel hierarki, klare farver og veldefinerede overflader gør appen nem at bruge og forstå – selv for nye brugere. Prototypen demonstrerer dermed, hvordan både designæstetik og funktionel brugervenlighed kan gå hånd i hånd i et gennemarbejdet mobilinterface.
Favorite-ikon
Som man kan se på billedet med stjernerne ved siden af, det er mit Favorite-ikon, der skulle laves gennem components og variables.
Man kan se, der er tre stadier, hvoraf denene går igen – og det er simpelthen for at jeg kunne få den til at gå retur fra aktiv til inaktiv. Mellemstadiet (stjernen i midten af loopet) har to funktioner. 1) den skal sikre en glat overgang fra ingen fylde til en gul fylde, og 2) den er en lille smule forstørret end de andre to stadier. Årsagen til forstørrelsen er simpelthen, at den laver et lille hop så man tydeligt ser en interaktion, og at den ikke bare skifter over til en gul farve meget subtilt. Det lille hop sikrer en tydelig transition mellem de to stadier.
Desværre laver den også et underligt spring mod højre som jeg ikke umiddelbart kan forklare. Animationen skulle bare have været en stilstand forstørrelse – helt optimalt så skal den ikke springe til siden.
Selve Favorite-ikonet er alt for lille. Når man tænker på Material Design, så skal den være 48×48 dp – og det er den på ingen måde. Den skal have betydeligt meget mere plads for at fungere korrekt. Lige nu, der vil man nok bare ende op med at trykke på hele panelet fremfor ikonet. Så ikonets størrelse skal være markant større for at have en reel funktion og virkning.
Navigationsbar & FAQ-sektion
Først og fremmest har vi navigationsbaren, der også kan ses på både Tuturials- og FAQ-sektionen.
I begyndelsen havde jeg tiltænkt, at de skulle have titler som kunne skifte farver mellem de to stadier (de to screens), men det besluttede jeg mig for at lade være med. Årsagen er simpelthen at teksten samt den spacing det kræver mellem ikon og titel kræver for meget plads, og så bliver hele navigationsbaren enorm – og det vil vi ikke have.
Så i stedet for tænkte jeg, at eftersom vi kun har to screens – så er det ikke livsnødvendigt at navngive dem. Derfor har jeg fjernet titlerne og tilføjet en lille linje under den aktive screen. Bogen er Tutorials, og de to talebobler er FAQ. Som man kan se på animationen, så er den meget simpel og benytter faktisk kun to stages: inaktiv og aktiv. Smart-animationen sørger for, at den blå linje flytter sig som den skifter screen – og samtidig udvikler den sig til en orange farve.
Til venstre ser vi min FAQ-screen. Fokus her var, at der skulle være plads til de forskellige elementer (ikon, titel, brødtekst), og så skulle den kunne ændre størrelse afhængig af hvor meget plads til kræver. Der er forskellige animationer og forskellige versioner. På billedet kan ses to versioner: én blå og én orange. De har begge to nøjagtigt samme animationer, forskellen er udelukkende farven.
Der er en animation på ikonet, hvor den ændrer sig fra et plus (den hvide, lukkede version), og når man så udvider panelet så vil den skifte farve på ikonet og fjerne den ene linje så vores plus bliver til et minus. Trykker man et vilkårligt sted på panelet, så vil den lukke sig sammen igen og ændre vores minus til et plus-ikon igen, og samtidig ændre farven på ikonet tilbage til sort.
Ikonet er lavet manuelt fra bunden via en cirkel og to streger. Der er blevet benyttet en Boolean (Union) for at vores Auto Layout ikke ødelægger ikonet og placere de enkelte dele ved siden af hinanden.
Samtidig med at den åbner op, der vil den skubbe alle nedenstående paneler væk for at den ikke overlapper. Her er der blevet benyttet Auto Layout for at få det automatisk skub i panelerne. Uanset hvor meget tekst jeg fylder i et af panelerne, så vil den optage den plads den har brug for og skubbe de andre paneler ned.
Der er to forskellige versioner for, at siden ikke bliver for kedelig. Hvert andet panel har en orange farve, hvoraf de andre så vil være blå.