![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-286847-6382cd330196d.webp\")
<\/a><\/p>\n\n Appens anv\u00e4ndargr\u00e4nssnitt adresserar alla sm\u00e4rtpunkter den vanliga ryttaren har. Var exakt ligger \u00e5ket just nu? Hur l\u00e5ng tid tar det f\u00f6r bilen att komma fram till f\u00f6rarens plats? Hur mycket kommer ryttaren att betala? Vad \u00e4r f\u00f6rarens nummer om han beh\u00f6ver kontaktas? Alla viktiga detaljer som ryttaren beh\u00f6ver visas i appen p\u00e5 ett systematiskt s\u00e4tt. \u00c4ven Ubers webbplats s\u00e4ger mycket om f\u00f6retagets drivkraft. Varje grafik, ikon och till och med typsnitten skriker ”behagligt” och ”l\u00e4tt”.\n<\/p>\n
\n Att ber\u00e4tta historier genom design involverar systematiska processer.
\n<\/h5>\n
\n Som med allt som \u00e4r byggt f\u00f6r hand (och sinne), m\u00e5ste effektiv design f\u00f6lja vissa processer. Ta till exempel processen att skapa en webbplats. Du bygger storyboards innan du ens b\u00f6rjar skapa mock-ups eller wireframes. Varje del av din ber\u00e4ttelse ska inneh\u00e5lla en interaktion, till exempel vad som kommer att h\u00e4nda n\u00e4r anv\u00e4ndaren klickar p\u00e5 n\u00e5got eller scrollar ner, och s\u00e5 vidare.\n<\/p>\n
\n Braden Kowitz, en k\u00e4nd designer f\u00f6r anv\u00e4ndarupplevelser, f\u00f6resl\u00e5r att du skapar en serie narrativa anv\u00e4ndningsfall f\u00f6r din produkt som illustrerar varje steg i anv\u00e4ndarens resa. Han kallar det en ber\u00e4ttelsecentrerad designprocess. Med detta kan du simulera anv\u00e4ndarupplevelsen och identifiera alla m\u00f6jliga resultat och som ett resultat kommer dina designbeslut att baseras helt p\u00e5 hur m\u00e4nniskor v\u00e4ljer att anv\u00e4nda din produkt.\n<\/p>\n
\n Detta st\u00e5r i skarp kontrast till en sk\u00e4rmcentrerad design, d\u00e4r du presenterar eller skapar en genomg\u00e5ng av ett anv\u00e4ndargr\u00e4nssnitt n\u00e4r ett visar en ritning. Att visa ritningar betyder att du bara r\u00e4knar upp hur varje element faller in i planen. ”Problemet \u00e4r att”, s\u00e4ger Kowitz, ”n\u00e4r design presenteras p\u00e5 det h\u00e4r s\u00e4ttet bygger du bara en f\u00f6rst\u00e5else f\u00f6r hur produkten ser ut. Du fokuserar inte p\u00e5 hur produkten fungerar, och du simulerar inte hur kunder interagerar med den.”\n<\/p>\n
\n Kowitz f\u00f6resl\u00e5r ocks\u00e5 att du anv\u00e4nder verktyg som Adobe Fireworks och screencast-program n\u00e4r du renderar dina ber\u00e4ttelser f\u00f6rutom de vanliga visuella designprogramvaran Adobe Photoshop och Adobe Illustrator. Skapa inte f\u00f6r webben genom att bara designa individuella sk\u00e4rmar.\n<\/p>\n
\n N\u00e4r du \u00f6var p\u00e5 att anta denna disciplin blir din designprocess mycket enklare. Du kan ocks\u00e5 lyfta fram designfel som ofta f\u00f6rbises. Du kan ocks\u00e5 vara medveten om huruvida du n\u00e5r dina designm\u00e5l eller inte n\u00e4r du g\u00e5r fram\u00e5t. Dessutom kommer du att kunna arbeta snabbare n\u00e4r du har alla delar av processen t\u00e4ckta eller behandlade.\n<\/p>\n
\n S\u00e4ttet du ber\u00e4ttar din designhistoria p\u00e5 spelar ocks\u00e5 roll.
\n<\/h5>\n
\n I varje designprojekt m\u00e5ste du f\u00f6rst s\u00e4tta scenen f\u00f6r din ber\u00e4ttelse. Bakgrunder och st\u00e4mningar spelar lika stor roll som ditt faktiska budskap och \u00f6nskade resultat. Hur kommer din ber\u00e4ttelse att sl\u00e5 igenom?\n<\/p>\n
- \n
- \n Infoga en personlig ber\u00e4ttelse.<\/strong> Du m\u00e5ste kunna tilltala din publiks sinnen. Om detta \u00e4r sv\u00e5rt f\u00f6r dig m\u00e5ste du kunna hitta ett s\u00e4tt att integrera publiken i din ber\u00e4ttelse. M\u00e4nniskor m\u00e5ste kunna relatera till vad dina sm\u00e4rtpunkter \u00e4r f\u00f6r att de ska kunna agera.\n <\/li>\n
- \n S\u00e4g det ov\u00e4ntade.<\/strong> Tvinga inte en anv\u00e4ndare att g\u00e5, ”Jag har sett det h\u00e4r m\u00e5nga g\u00e5nger. Varf\u00f6r skulle jag tro p\u00e5 detta?” L\u00e5t inte din publik bli skeptisk. F\u00e5 deras uppm\u00e4rksamhet genom att g\u00f6ra n\u00e5got nytt. Anv\u00e4nd inte formellt kopia eller alltf\u00f6r v\u00e4lbekant grafik eller ljud.\n <\/li>\n
- \n Utmana konventionell visdom.<\/strong> Vem visste att de d\u00e4r snurriga emojierna kan f\u00f6rb\u00e4ttras? De har varit en del av sms- och meddelandekulturen s\u00e5 l\u00e4nge, men idag kan du till och med bifoga r\u00f6rliga versioner av dem som objekt i videor. M\u00e4nniskors uppm\u00e4rksamhet blir kortare f\u00f6r varje minut, s\u00e5 som designer m\u00e5ste du hela tiden hitta s\u00e4tt att f\u00f6rb\u00e4ttra \u00e4ven de enklaste, mest anv\u00e4nda sakerna f\u00f6r att f\u00f6rhindra att de blir tr\u00e5kiga.\n <\/li>\n
- \n Haka p\u00e5 dem med nyhet.<\/strong> Introducera n\u00e5got nytt med varje ber\u00e4ttelse. Inkludera data f\u00f6r att validera dina p\u00e5st\u00e5enden. Har du n\u00e5gonsin undrat varf\u00f6r din hj\u00e4rna l\u00e4ngtar efter infografik? Det tar m\u00e4nniskor l\u00e4ngre tid att bearbeta ny information som presenteras f\u00f6r dem. Med infografik kan m\u00e4nniskor bearbeta symboler och siffror p\u00e5 n\u00e5gra millisekunder och kan ge dem mening direkt. De \u00e4r l\u00e4ttsm\u00e4lta och extremt engagerande.\n <\/li>\n
- \n St\u00e4ll provocerande fr\u00e5gor.<\/strong> Framg\u00e5ngsrika designber\u00e4ttelser kommer att tvinga din publik att agera. F\u00e5 alltid dina potentiella kunder eller kunder att t\u00e4nka efter. Vad st\u00e5r p\u00e5 spel? Vad h\u00e4nder sen? P\u00e5 s\u00e5 s\u00e4tt f\u00e5r du din ber\u00e4ttelse att h\u00e5lla fast.\n <\/li>\n<\/ul>\n
\n N\u00e5gra fantastiska exempel att ta ledningen fr\u00e5n.\n<\/p>\n
\n Nu n\u00e4r du vet varf\u00f6r bra ber\u00e4ttande \u00e4r viktigt och vad bra ber\u00e4ttande inneb\u00e4r, \u00e4r det dags att utforska fler bra exempel p\u00e5 \u00f6vertygande visuellt ber\u00e4ttande.\n<\/p>\n
\n 1 Bellroy \u2013 Slimma din pl\u00e5nbok
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-286847-6382cd3528ec7.webp\")
<\/a> Slimma din pl\u00e5nbok. K\u00e4lla<\/a><\/p>\n\n Den h\u00e4r \u00e4r ett riktigt bra exempel p\u00e5 en designber\u00e4ttelse som \u00e4r bra. Den presenterar ett redan existerande problem (i det h\u00e4r fallet feta pl\u00e5nb\u00f6cker) och visar dig hur produkten kommer att l\u00f6sa ditt problem, sida vid sida. Det finns ocks\u00e5 en kort instruktion om vad anv\u00e4ndaren ska g\u00f6ra: ”Flytta reglaget f\u00f6r att j\u00e4mf\u00f6ra pl\u00e5nb\u00f6cker.” Enkel formulering, men \u00e4nd\u00e5 s\u00e5 exakt. Utg\u00e5 inte alltid fr\u00e5n att n\u00e5gon som bes\u00f6ker din webbplats automatiskt vet vad de ska g\u00f6ra.\n<\/p>\n
\n 2 Atlassian \u2013 Tidssl\u00f6seri p\u00e5 jobbet
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-286847-6382cd388ca2c.webp\")
<\/a> Tidssl\u00f6seri p\u00e5 jobbet. K\u00e4lla<\/a><\/p>\n\n Atlassians interaktiva infografik tar dig vid handleden med detta irriterande faktum: du sl\u00f6sar bort mycket tid p\u00e5 jobbet. Den ger dig sedan statistik f\u00f6r att backa upp detta p\u00e5st\u00e5ende. \u00c4ven om det \u00e4r helt ny information \u00e4r det ett ganska tr\u00e5kigt \u00e4mne. Det som g\u00f6r det effektivt \u00e4r att det presenteras p\u00e5 ett s\u00e4tt som \u00e4r interaktivt och sprudlar av f\u00e4rg, samtidigt som det f\u00f6rmedlar en k\u00e4nsla av professionalism. F\u00e4rg f\u00e5ngar uppm\u00e4rksamhet och hj\u00e4lper till att betona viktig information.\n<\/p>\n
\n 3 Slack \u2013 NASA omn\u00e4mnande p\u00e5 hemsidan
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-286847-6382cd3b9a629.webp\")
<\/a> NASA omn\u00e4mnande p\u00e5 hemsidan. K\u00e4lla<\/a><\/p>\n\n Under en tid hade produktivitets- och meddelandeappen Slack p\u00e5 arbetsplatsen en mycket smart inkludering p\u00e5 sin hemsida. De presenterade NASA Jet Propulsion Lab, en uppskattad kund, med kopian, ”En meddelandeapp f\u00f6r team som s\u00e4tter robotar p\u00e5 Mars!!” tillsammans med ett foto av Mars som hj\u00e4ltebild. Det \u00e4r en historia i sig. Slack vill tydligt antyda att produkten \u00e4r tillr\u00e4ckligt bra f\u00f6r ditt team eftersom \u00e4ven NASA-forskare anv\u00e4nder den. N\u00e4r du designar f\u00f6r en produkt m\u00e5ste du omedelbart kunna erbjuda ett v\u00e4rdeerbjudande med bara ett utseende. Ber\u00e4tta f\u00f6r publiken varf\u00f6r du sticker ut utan att \u00f6verlova vad du kommer att leverera.\n<\/p>\n
\n 4 Twoodie \u2013 Ekologiska tr\u00e4leksaker f\u00f6r bebisar
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-286847-6382cd3d63724.webp\")
<\/a> Ekologiska tr\u00e4leksaker f\u00f6r bebisar. K\u00e4lla<\/a><\/p>\n\n Det \u00e4r inte de tekniska aspekterna av webbplatsen som kommer att dra in dig utan ber\u00e4ttandet som kommer med bilderna p\u00e5 webbplatsen. F\u00f6r att lyfta fram vad de erbjuder \u00e4r allt i gr\u00e5skala f\u00f6rutom sj\u00e4lva leksakerna. Detta framkallar en k\u00e4nsla av renhet och enkelhet. Tittaren \u00e4r gjord f\u00f6r att h\u00e5lla fast vid l\u00f6ftet om att varum\u00e4rket \u00e4r helt h\u00e5llbart, s\u00e4kert och ekologiskt med design som \u00e4r genomt\u00e4nkt.\n<\/p>\n
\n Visuals kommer alltid att vara k\u00e4rnan i designen. Men uppslukande ber\u00e4ttande \u00e4r ocks\u00e5 lika viktigt s\u00e5 det l\u00f6nar sig verkligen att t\u00e4nka p\u00e5 historien du vill ber\u00e4tta. G\u00f6r det till en po\u00e4ng att inkludera detta i din designprocess och koppla den intressanta ber\u00e4ttelsen till dina m\u00f6nster, f\u00e4rger, bilder, typsnitt och effekter. N\u00e4r du \u00e4r klar, utv\u00e4rdera om ber\u00e4ttelsen fungerar eller inte eller om den l\u00e4mnar en best\u00e5ende effekt. Se till att din design ansluter till sinnena, skapar nya upplevelser och genererar best\u00e5ende resultat.\n<\/p>\n<\/p>\n
- \n S\u00e4g det ov\u00e4ntade.<\/strong> Tvinga inte en anv\u00e4ndare att g\u00e5, ”Jag har sett det h\u00e4r m\u00e5nga g\u00e5nger. Varf\u00f6r skulle jag tro p\u00e5 detta?” L\u00e5t inte din publik bli skeptisk. F\u00e5 deras uppm\u00e4rksamhet genom att g\u00f6ra n\u00e5got nytt. Anv\u00e4nd inte formellt kopia eller alltf\u00f6r v\u00e4lbekant grafik eller ljud.\n <\/li>\n