Как изборът на дизайн тема може да направи разликата между посредствените и сериозните онлайн търговци?

Значимо място в разработката на всеки един онлайн магазин заема неговата визия. Малки и големи брандове влагат различна важност и усилия в това да имат онлайн магазин, който да е запомнящ се за потребителите и да ги отличава от конкуренцията. За разлика от презентационните уебсайтове, в онлайн магазините, визията представлява цялостният потребителски интерфейс, чрез който клиентите взаимодействат със системата и бизнеса. Това прави задачата по създаването й доста комплексна и с различни предизвикателства, спрямо разработката на чист графичен дизайн.

„Повечето хора правят грешката да мислят, че дизайнът е това, как изглежда един продукт. Дизайнът е много повече - това е начинът, по който той работи.“
Steve Jobs

Горният цитат е потвърждение от един от най-големите умове за комплексността на потребителските интерфейси. В същото време доминацията на мобилното пазаруване през телефони - там, където онлайн магазините изглеждат сравнително еднакво, повдига на съвсем друго ниво темата с вниманието към детайлите и как малките промени, правят големи разлики.

И тук идва логичният въпрос - “Как да изберем дизайн тема за нашия онлайн магазин?”.

За да отговорим, е нужно да разгледаме по-широко възможните варианти и решения, както и да си обясним някои фундаментални принципи в създаването на потребителски интерфейси за онлайн магазини.

Какво е дизайн тема?

Понятието “дизайн тема” в уеб дизайна и потребителския интерфейс обхваща цялостния визуален аспект на сайта, включително цветове, шрифтове, бутони, графики и архитектура на страниците. Дизайн темите са ключов елемент в платформите за електронна търговия и осигуряват не само визията, но и потребителската функционалност на онлайн магазините.

Design theme for online stores

Генерално, в уеб разработката (сайтове и е-магазини) съществуват два подхода за създаване на дизайн за клиентски проект - ползване на готова тема (темплейт) или създаване на индивидуален дизайн. Има и някои нюанси в тези подходи, които ще разгледаме малко по-надолу.

Готови теми (темплейти)

Основната идея на готовите теми е да предоставят бърз и икономичен начин за стартиране на онлайн магазин. Те предлагат определена визия, често вървят в комбинация с допълнителна функционалност и могат да се инсталират и настроят бързо и сравнително лесно. Те са подходящи за малки и стартиращи бизнеси, които искат да започнат своите онлайн продажби възможно най-скоро и с минимални инвестиции в това перо.

Готовите дизайн теми са основен стълб при изграждане на онлайн магазини, които са базирани на платформи от типа SaaS (software-as-a-service) с месечен наем, при които достъпът до програмния код на системата е ограничен, а често и самият клиент сам създава онлайн магазина си (self-service).

Готовите дизайн теми се използват и в системите с отворен код, най-често от по-малки агенции, които нямат на разположение вътрешни дизайнери, front-end програмисти и тестери.

Често в готовите дизайн теми освен наложени стандарти за потребителско преживяване се срещат и по-иновативни функции, целящи “УАУ ефекта”, не толкова в потребителите на онлайн магазина, колкото в търговците, които се колебаят коя дизайн тема да изберат, измежду наличните варианти за тяхната платформа.

Готовите дизайн теми имат своето място в жизнения цикъл на почти всеки онлайн търговец, като обикновено се използват в неговото начало, когато бизнесът е на ниво “тест на бизнес модела”, освен в случаите на продажба на специфични продукти, индивидуални необходимости или определен имидж на бранда, който трябва да бъде пренесен онлайн.

Готовите дизайн теми в Magento

За Magento, като най-познатото (или единствено) enterprise open source решение за електронна търговия, са налични безброй теми, разработени от познати и непознати разработчици, достъпни за ползване след закупуване на лиценз срещу няколко стотин долара.

Ако Вие сте клиент, който правилно е преценил възможностите и амбициите си за развитие, би следвало да не прибягвате до ползване на готови теми в контекста на Magento. Платформата е комплексна и макар върху нея да могат да се изградят всякакъв вид онлайн магазини, тя е най-подходяща за средни и големи, като сложност и мащаб, проекти. Това само по себе си значи, че за всеки проект трябва има алокиран определен бюджет, вместо да се инвестира в него “между другото”. Темата с инвестициите в софтуер и дигитални активи на бизнеса е по-широка и ще я разгледаме в друга статия в нашия блог.

Все пак и за да покрием темата от 360 градуса, е нужно да отделим внимание и на тях.

Ползите от готови теми в Magento не се различават по своята същност от ползването на готовите теми в други eCommerce системи, посочени по-горе.

Ето и някои от честите проблеми, с които сме се срещали, в случаите, в които при нас е акостирал проект от друга агенция, базиран на готова тема:

Ниска скорост: Почти без изключения готовите теми съдържат голямо количество програмен код, който води до ниски резултати за скорост на е-магазина. Има теми, които са конструирани, така че да бъдат бързи, но практиката показва, че правенето на промени в тях, води до рязък спад в представянето им откъм скорост.
Нарушен UI/UX: дори малки промени в готовата тема могат да доведат до нарушено потребителско преживяване.
Допълнителни ъпдейти: освен ядрото на системата и ползваните модули, е нужен регулярен ъпдейт и на темата.
Ограничения в развитието: готовите теми често не предоставят достатъчна гъвкавост за допълнително развитие и ограничат развитието.
Зависимост от външни разработчици (трети страни): макар да сме големи привърженици на ползване на екстеншъни в екосистемата на Magento, що се касае до отделни функционалности, но цялостна зависимост при темите може да бъде рискова.

Бизнесите трябва да бъдат осведомени не само за предимствата на готовите теми, но и за потенциалните рискове и ограничения, които носят със себе си тези решения. Изборът на по-бюджетни решения може да има скъпи последици в бъдеще, които е важно да се вземат предвид. Въпреки че на пръв поглед тези опции изглеждат като добро решение, често водят до по-големи разходи и проблеми в дългосрочен план.

И в крайна сметка често достигаме до старата максима, която гласи:

Индивидуална дизайн тема (къстъм дизайн)

Индивидуалните дизайн теми се разработват специално за конкретния бизнес и са адаптирани към специфичните изисквания на проекта. Персонализираните теми са подходящи за средни и големи бизнеси, които искат да създадат отлично потребителско изживяване и да се отличат от конкуренцията, следвайки най-добрите практики в бранша, но и придавайки индивидуалност на бизнеса. Индивидуалната дизайна тема се създава в мулти-стъпков процес, който включва:

Дизайн (UX/UI).
Програмна работа (DEV).
Тестване (QA).

Ако разгледаме по-детайлно частта с дизайна, той обикновено се състои от:

Workshop с клиента, собственик на бизнеса.
Проучване на бранш / ниша / вертикала / конкуренти.
Анализ на силни и слаби страни на бизнеса.
Оформяне на sitemap.
Създаване на макети (wireframe) с основна цел - оформяне на архитектура на публичната част на проекта.
Задаване на moodboard (за задаване визуалния тон, включително .цветови схеми, типография, изображения и визуални послания).
Създаване на графичния дизайн (най-често посредством Figma или друг графичен софтуер).
Събиране на обратна връзка от клиента, ревизии и финализиране на графична част.

С това стъпките за изграждане на визуалната част приключват и създадения визуален дизайн, следва да бъде кодиран - процес, който включва най-често html, css, javascript програмиране. С финализиране на front-end програмирането, дизайн темата е готова, като в много случаи има нужда от back-end програмиране, преди темата да е готова за тестове.

Както виждаме разликата при ползване на готова дизайн тема и създаване на индивидуална такава излиза отвъд създаване на самия графичен дизайн - нещо, което доста клиенти с учудване разбират, когато се колебаят кой е техния път.

Какво е storefront и какво значение има той?

След като дефинирахме понятието "дизайн тема", то в контекста на Magento, е нужно да споменем и за наличието на слой, наречен storefront. Ако трябва да обясним термина storefront с няколко думи, то бихме го нарекли “скелета зад визуалната част (темата)”.

Популярните и стандартизирани storefront решения са:

Luma (с която системата идва по подразбиране)

Luma storefront - Magento

Hyvä (използваща по-нови технологии и осигуряваща по-висока скорост на зареждане).

Hyvä storefront - Magento

Разработвайки дизайн тема за Magento едно от фундаменталните решения, които трябва да бъдат взети в самото начало е дали тя да бъде разработена за някое от тези storefront решения или ще бъде създадена върху празен темплейт. Свободата, която платформата предоставя дава поле за изява на всеки разработчик да разработва темата както той намери за добре, включително и за разработка на цял алтернативен storefront. В този смисъл онова, което не бива да забравяме е стандартизацията.

Разработвайки дизайн тема, която следва стандартите и ще бъде имплементирана върху някое от стандартизираните storefront решения, дава широки възможности пред създаден онлайн магазин да бъде надграждан с външни екстеншъни, ъпдейтван и поддържан, спрямо стандартите и добрите практики.

Въпреки това много разработчици избират пътя да разработват дизайн теми, които не са адаптирани за storefront решение, защото често това е по-лесно и дава възможност да не се спазват добрите практики и спестява време. Съществуват и частни случаи, в които необходимостите на съответния проект, по който се работи налагат изцяло custom решение по отношение на storefront и тема.

Могат ли Luma & Hyvä да се ползват като готова дизайн тема?

Краткият отговор е - да, но не за всеки. Макар и да имат завършен вид, основната цел на тези storefront решения е демонстрационна. Те предлагат една по-семпла визия, която може да е недостатъчна за по-амбициозните търговци и онези, които имат специфични изисквания в корпоративната идентичност. Нашата визия за ползването им е семпла - те предоставят страхотна основа за създаване на впечатляващи и индивидуални дизайн теми за отделните проекти, които разработваме и поддържаме.

Дизайн решения от Stenik - стандартизирани, оптимални и иновативни

Следвайки всички добри практики, за които пишем по-горе, в Stenik винаги сме развивали собствени дизайнерски и front-end екипи които работят в синергия, за да можем да предоставяме решения, които отговарят на различните клиентски изисквания и са стандартизирани. Това е и едно от важните неща, които ни отличават от повечето от останалите агенции, които работят с готови темплейти или разработват не-стандартизирани дизайн теми.

Понастоящем най-популярните решения по отношение на потребителските интерфейси за нашите проекти са:

Индивидуална дизайн тема, базирана на Luma Storefront. Luma все още е най-стандартизирания storefront за Magento и е съвместим с най-голям брой third-party екстеншъни.
Индивидуална дизайн тема, базирана на Hyvä Storefront. Hyvä е най-доброто решение по отношение на постигане на по-висока скорост на зареждане.
Адаптиран дизайн, базиран на нашите Cypho B2C & B2B дизайн теми.

Какво е Stenik Cypho?

В отговор на нуждите на определен сегмент клиенти и базирайки се на изпитани компоненти, създадохме нашата собствена дизайн тема, наречена Cypho. Тя дава възможност за индивидуализация в разумни граници и е оптимален резултат по отношение на вложено време за реализация, бюджет и качество на крайния резултат. Тази тема е вдъхновена от наложените eCommerce тенденции, които сме имплементирали в различни проекти и доказано работят. Тъй като необходимостите за B2C и B2B търговци са различни, темата има два коренно различни интерфейса, подходящи за двата бизнес канала. Темата е 100% стандартизирана, защото е базирана на Luma Storefront и по подразбиране работи с всички модули, които са наша разработка, както и с всички Magento екстеншъни на външни разработчици.

Cypho Storefront by Stenik

Онлайн търговци от различни браншове и част от нашето портфолио ни се довериха за изграждането на техните магазини с нашето решение Cypho Storefront.

Реализирани проекти със Cypho Storefront

В момента работим по няколко нови проекта, базирани на Cypho Storefront и наблюдаваме засилен интерес от страна на онлайн търговци към това наше решение. Очакваме в следващите месеци да реализираме още не малък брой успешни проекти.

Заключение

Изборът между готовите и индивидуално разработени теми за Magento има фундаментално значение за успешното онлайн развитие на търговците и удовлетворението на техните клиенти. От по-добра скорост, през възможност за индивидуални разработки, до устойчиво развитие и намаляване на разходите в дългосрочен план, правилното дизайн решение в правилния момент може да предопредели много от тези компоненти. А те, както добре знаем, имат пряко отношение към открояването от конкуренцията, увеличаването на оборотите и цялостния успех в онлайн търговията.