Webhelyek, e-kereskedelem vagy alkalmazások színsémáinak fejlesztése
Jó néhány cikket megosztottunk a színek fontosságáról egy márka szempontjából. Egy webhely, e-kereskedelmi webhely, illetve mobil- vagy webalkalmazás esetében ez ugyanolyan fontos. A színek hatással vannak:
- A márka kezdeti benyomása és értéke – például a luxuscikkek gyakran feketét használnak, a piros pedig izgalmat stb.
- Vásárlási döntések – egy márka bizalmát a színkontraszt határozhatja meg. A lágy színsémák nőiesebbek és megbízhatóbbak, az éles kontrasztok sürgetőbbek és kedvezmények lehetnek.
- Használhatóság és felhasználói élmény – a színeknek pszichológiai jellemzőik vannak és fiziológiai hatást is, ami megkönnyíti vagy megnehezíti a felhasználói felületen való navigálást.
Mennyire fontos a szín?
- Az emberek 85%-a azt állította, hogy a színek nagyban befolyásolják, hogy mit vásárolnak.
- A színek átlagosan 80%-kal növelik a márka ismertségét.
- A színlenyomat a termék elfogadásának vagy elutasításának 60%-áért felelős.
Egy weboldal színsémájának meghatározásakor néhány lépést a mellékelt infografika részletez:
- Elsődleges szín – Válasszon egy színt, amely megfelel terméke vagy szolgáltatása energiájának.
- Akció színei – Ez hiányzik az alábbi infografikáról, de az elsődleges műveletszín és a másodlagos műveletszín azonosítása rendkívül hasznos. Arra oktatja közönségét, hogy a szín alapján meghatározott felhasználói felületelemekre összpontosítson.
- Atovábbi színek – Válasszon továbbiakat színek, amelyek kiegészítik az elsődleges szín, ideális esetben azok a színek, amelyek az elsődleges színt adják pop.
- Háttér színek – Válasszon színt webhelye hátteréhez – lehetőleg kevésbé agresszív, mint az elsődleges színe. Tartsa szem előtt a sötét és világos módot is. Egyre több webhely alkalmazza a világos vagy sötét mód színsémáit.
- Betűtípusok színei – Válasszon színt a webhelyén megjelenő szöveghez – ne feledje, hogy a tömör fekete betűtípus ritka és nem ajánlott.
Például a cégem DK New Media online márkát fejlesztett ki egy ruhagyártó számára, aki egy közvetlen fogyasztói e-kereskedelmi webhelyet akart építeni, ahol az emberek online vásárolhatnak ruhákat. Megértettük célközönségünket, a márka értékét, és – mivel a márka túlnyomórészt digitális volt, de volt fizikai terméke is – olyan színsémákra összpontosítottunk, amelyek jól működnek a nyomatokon (CMYK), a szövetpalettákon (Pantone), valamint digitális (RGB és Hex).
Színséma tesztelése piackutatással
A színséma kiválasztásának folyamata intenzív volt.
- Marketingkutatást végeztünk egy sor elsődleges színről a célközönségünkkel, így egyetlen színre redukáltunk.
- Marketingkutatást végeztünk egy sor másodlagos és harmadlagos színről célközönségünkkel, ahol leszűkítettünk néhány színsémát.
- Termékmaketteket (termékcsomagolás, nyak- és függőcímkék), valamint e-kereskedelmi maketteket készítettünk a színsémákkal, melyeket visszajelzés céljából a megrendelő és a célközönség rendelkezésére bocsátottunk.
- Mivel a márkájuk nagymértékben függött a szezonalitástól, szezonális színeket is beépítettünk a keverékbe. Ez jól jöhet bizonyos gyűjtemények vagy hirdetések és közösségi média megosztások esetén.
- Több mint fél tucatszor mentünk keresztül ezen a folyamaton, mielőtt a végső sémát választottuk volna.
Míg a márka színei világos rózsaszín és sötétszürke, mi kifejlesztettük a akció színei hogy a zöld árnyalata legyen. A zöld egy akció-orientált szín, így remek választás volt, hogy felhívjuk felhasználóink figyelmét az akcióorientált elemekre. Másodlagos műveleteinkhez a zöld inverzét alkalmaztuk (zöld szegély fehér háttérrel és szöveggel). Ezenkívül teszteljük a zöld sötétebb árnyalatát az akciószínen a lebegési műveletekhez.
Mióta elindítottuk az oldalt, beépítettünk egérkövetést és hőtérképeket, hogy megfigyeljük azokat az elemeket, amelyekhez látogatóink leginkább vonzódnak, és amelyekkel a legtöbbet interakcióba lépnek, hogy ne csak jól nézzen ki, hanem jól is működjön a színséma.
Színek, fehér tér és az elemek jellemzői
A színséma kialakítását mindig úgy kell végrehajtani, hogy azt egy általános felhasználói felületen teszteljük, hogy megfigyeljük a felhasználók interakcióját. A fenti webhelyhez nagyon specifikus margókat, kitöltéseket, körvonalakat, szegélysugárokat, ikonográfiát és betűtípusokat is beépítettünk.
Teljes márkaépítési útmutatót szállítottunk a vállalat számára, amelyet bármely marketing- vagy termékanyaghoz belsőleg terjesztünk. A márka egységessége kritikus fontosságú ennél a cégnél, mivel újak, és jelenleg nincs ismertségük az iparágban.
Íme az eredményül kapott e-kereskedelmi webhely színsémával
Színhasználat és színvakság
Ne felejtse el a színkontraszt használhatósági tesztelését webhelye elemei között. A sémát a Webhely-kisegítő lehetőségek tesztelő eszköze
. A színsémánk segítségével tudjuk, hogy vannak kontrasztproblémánk, amelyeken az úton dolgozunk, vagy akár néhány lehetőségünk is adódhat felhasználóinknak. Érdekes módon a színproblémák esélye a célközönségünkkel meglehetősen alacsony.A színvakság az, hogy képtelenség észlelni a különbségeket egyes színek között, amelyeket a nem színezett, fogyatékkal élő felhasználók meg tudnak különböztetni. A színvakság kb a férfiak öt-nyolc százaléka (körülbelül 10.5 millió) és a nők kevesebb mint egy százaléka.
Usability.gov
A WebsiteBuilderExpert csapata összeállította ezt az infografikát és egy részletes kapcsolódó cikket Hogyan válasszunk színt webhelyéhez ez rendkívül alapos.