Redesign internetového obchodu s minimálním úsilím

Níže vám řeknu, jak je možné s minimálními změnami (ne vždy) upravit design téměř hotového webu a jaké problémy jsme narazili, když bylo vše připraveno.

Než začnu, Vysvětlím – to nebude, že zde budou objevy století nebo nějaký velmi obtížný úkol. Všechno dále je určeno pro mladé designéry a jen pro lidi, kterým to není lhostejné. Zkušené katastrofy se však budou nudit, nezajímavě, protože takové projekty byly v jejich práci stokrát. Takže pochopte a … Začněme tím.

Výzva

První návštěva webu Mým přáním bylo buď odmítnout objednávku, nebo nabídnout všechno znovu. Je to neprofesionální a hrubé. Jak se ukázalo později, ďábel není tak hrozný, jak je malován.

Všichni stejní zákazníci jako v předchozím článku – tealab. Stojí za zmínku, že s touto značkou pracujeme vytrvale, neustále a náš vztah je docela důvěryhodný, aby vyloučil všechny druhy občanských řádů a stádií „prodeje“ se v rozhovoru. To však není důvod tvrdit, že je váš design „hrozný“, a prodat nový. Pojďme si poslechnout, co má tealab říct.

Co je: design je již rozložen a dokonce částečně natažen přes crm. Rozvržení jsou zabalena v obrma. Existuje kontakt s návrhářem a programátorem rozvržení ze strany zákazníka. Ale zatímco web není v bitvě.

Úkol: s minimálními změnami, aby stránky získaly prodejnější vzhled, aby byly vizuálně atraktivní. Opravte design mobilní verze.

Výzva je přijata!

Analýza

Na internetu existuje mnoho příjemných online obchodů – od malých po velká tržiště .

Před námi je malý web pro čaj, kávu a nádobí pro maloobchod. Na základě praxe by to mělo být mírně kreativní, ale ne příliš kreativní, protože když mluvíme o online obchodě, ve kterém je více než sto produktů, ale ne více než tisíc, máme na mysli rozhraní.

V internetovém obchodě je v popředí funkčnost, pak krása a kreativita.

Před zahájením hledání referencí a rozhovorem o kráse jsme se zákazníkem probrali přesně funkční problémy a opravili práci, kterou je třeba udělat:

  1. Záhlaví webu. Je velký, a to jak na ploše, tak i pohotově. Pokud přejdete do katalogu, trvá to na obrazovce telefonu více než 35% a na malých zařízeních se tato hodnota alarmující blíží 50%.

  2. Produktové karty. Jsou příliš dlouhé s mělkým rozhraním.

  3. Výhody průchozí smyčky. Standardní štítky s ikonami, navzdory přítomnosti značkového prvku, vypadají těžce a pro uživatele jsou již nudné.

  4. Průchozí blok s poštou a o nás. Také standardní

  5. Zápatí. Tyto zápatí pocházely přímo ze začátku desetiletí. Není příliš funkční a zabírá spoustu místa.

  6. Fonty. Na některých místech je velmi velký řádkování.

Záhlaví webu

První věc, která mě zaujala, bylo velké množství barevných pruhů na pozadí. Pokud počítáte banner, je to téměř padesát odstínů šedé. Dostanete nápad)

Druhým jsou položky nabídky. Ve středu je zobrazeno to, co je potřeba téměř na poslední chvíli (mám na mysli „o nás“, „doručení“, „vrácení“ atd.). To je vše nezbytné, ale zvláštně druhořadé.

Třetí je spíše otravný. Tlačítko katalogu a pole nabídky se sloučí a vypadají jako jeden celek.

Vlastní skript – dělá usnadňuje práci s rozhraním. Před zahájením práce zvažte, jak se bude pohled uživatele pohybovat po obrazovce. Co dát jako první a jakou druhou?

V našem případě budou klíčové funkce Katalog, vyhledávání, košík, profil a pak vše ostatní. Vyzbrojeni touto objednávkou jsme si trochu otřásli klobouk. Na ploše se klobouk trochu přiblížil a tuk je kompaktní a na telefonu je to místo 35–40% již příjemných 15–20%.

karta produktu

Tady bylo úkolem usnadnit kartu a také přidat vlastnost produktu. Výška karty se výrazně zmenšila a díky zaoblení rohů se ukázalo, že je dosaženo takzvané uživatelské přívětivosti.

Tento zázrak bohužel není na mobilu a výška karty je přibližně stejná, ale stala se přesnější.

Uživatelsky přívětivý design je vždy příjemný a uživatelé ho dobře přijímají. Pokud to však s filety přeženete a obvykle si s takovou geometrií hrajete, můžeme získat mateřskou školu a nepochopení uživatele, kde skončil.

Výhody

Blok výhod zatím vypadá standardně. Obvykle hraje roli základní informace, že doručení je levné, po celé zemi a nyní také bezkontaktní.

Ve skutečnosti standardní fráze jako „Společnost č. 1 v nejlepší zemi na světě“, „Vysoce kvalifikovaní zaměstnanci“, „Individuální přístup“ atd. Šli do západu slunce a mávali perem. Ale někdy se vrátí a požádají je, aby byli. Navzdory tomu, že klienti společností již těmto hovorům nevěří, ale chtějí skutečné výhody.

V tomto případě jsme nudné ikony nahradili titulky krásnými fotografiemi a požádali o trochu lépe promyslete text.

Zápatí

Zápatí vypadalo jako něco málo srozumitelného – velkého a málo funkčního.

Přidali jsme velkou výzvu ke spolupráci jako pěknou elipsu místo kulky. Úplně dole duplikujeme hlavní části webu a katalogu. Kontakty samozřejmě. Všechno je zde standardní a není třeba vymýšlet na kole a jezdit na něm, abyste objevili Ameriku.

< p>Zápatí může být velké. Je dokonce skvělé, když je zápatí nezávislým blokem, ale zároveň je pokračováním webu.

Ale podle mého názoru je nejlepší zápatí malý proužek s autorskými právy, zásadami ochrany osobních údajů a odkazem na vývojáře. A to vše proto, že nabídka je nejčastěji fixována v horní části obrazovky a pohybuje se společně se stránkou. Minimalismus v akci, co jiného říct.

Fonty

Dobrá písma jsou často všechno. Alespoň hodně.

V našem případě byla vzdálenost mezi písmeny všude jiná a všude nepřiměřená. Rozdíl je nejlépe vidět v záhlaví: tlačítko katalogu, košíku a profilu

Největší a nejstrašnější skupina je vzdálenost od písmene k písmenu. Snadné hraní s vyrovnáním párů. Kerning je oblíbená hra začínajících návrhářů, když soutěžíte o to, kdo přidá větší vzdálenost mezi písmeny. Tvůrci písem předem promysleli a nastavili mezery mezi nimi. Chcete-li jej zvětšit (zmenšit), měli byste zvolit jiné písmo, nebo přemýšlet, je to nutné? Někdy je to nutné – pokud je písmo velmi malé, pokud jde o zvýrazňující písma (na plakátech, logech atd.). Ale ne všechny v řadě.

Výběr produktu v mobilu

Zde jsme se nechali inspirovat známým webem modrého tržiště. Hlavní funkce byly umístěny níže. A při sestavování výběru produktů jsme se nechali inspirovat dalším, již růžovým, dobře známým obchodem.

Můžete se zeptat, proč jste nepřišli s něčím svým. Odpověď zní – proč vymyslet kolo? Taková funkčnost funguje, je pohodlná a dobře se ukázala. Uživateli je srozumitelný, dokonce známý.

Problémy a chyby

Hlavní chybou byla arogance. Chtěli jsme přidat pěknou animaci pro blok „o společnosti“. Ale nevyšlo to. Chybou bylo, že jsme hned od začátku nekonzultovali s návrhářem rozložení právě tuto animaci.

Proto jsme bloku nevěnovali samostatnou sekci, protože tam není nic zajímavého.

Jedna osoba zřídka pracuje na webu. Vývoj webových stránek je vždy o interakci. Na práci ve více než jednom týmu je ale snadné na to zapomenout. Pokud dojde ke kontaktu s projektantem, koncept ho zahoďte, nechte ho, ať se podívá a řekne, co lze udělat a co způsobí potíže. Protože pokud k takovému problému dojde někde uprostřed rozvržení, je na vině návrhář.

Závěry a závěry

Nemohu psát závěry. Víte: P

Úkol nevypadá příliš obtížně, vše vyžaduje úsilí. Primárně analýza. Hlavním problémem takových projektů, kde není jen hotový design, ale také dispozice, není rozbít dispozice a nedopustit, aby zákazník zaplatil dvakrát. Nikdo nemá rád platby dvakrát.

Pokud se něco dramaticky změní, odůvodněte to. Doručování a přesvědčování je pro uživatele pohodlnější. Uživatel tedy bude schopen rychle najít požadovaný produkt atd.

Výsledky … Bolí si uvědomit, že narazil na hrábě, na které narazil více než jednou. Vzali jsme to v úvahu, otřeli jsme si nos a pokračovali)

Všichni bobři!

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.