Архів категорії: CSS

Дизайн і юзабіліті інтернет-магазину: 20 порад

Напевно, з кожним таке траплялося: знаходиш в пошуковику посилання на сторінку з потрібним товаром, переходиш туди, і через кілька секунд закриваєш вкладку, так як вид магазину залишає бажати кращого і довіри не викликає. Або навпаки: потрапляєш на сторінку красиву, витончену, але мудровану понад усяку міру. Енді Бут, англійський дизайнер і розробник, вже багато років працює в сфері електронної комерції, зібрав 20 порад, які стануть в нагоді кожному, хто хоче створити інтернет-магазин або поліпшити вже існуючий ресурс. Список, звичайно, неповний, але важливі аспекти і ті самі дрібниці, з яких складається враження, в ньому відображені.

1. Складні фільтри

http://mars.te.ua/20-ecommerce-design-tips/
Напевно, варіації є у ​​будь-якого товару – колір, розмір, ціна ітд … Зрештою, опцією може бути упаковка, подарункова або звичайна. Якщо у вашому інтернет-магазині реалізована зручна і зрозуміла система підбору товару за параметрами, він напевно сподобається навіть самим шкідливим покупцям. Подивіться, як фільтри реалізовані в інтернет-магазинах федеральних мереж магазинів побутової електроніки.

2. Пошук легкої “досяжності”

http://mars.te.ua/20-ecommerce-design-tips/
Amazon.com: над головною сторінкою домінує поле пошуку. І таке рішення напевно засноване на роках досвіду. Коли людина потрапляє в інтернет-магазин, але не знаходить те, що йому потрібно, скористатися функцією пошуку – його природне бажання. Тому ховати поле пошуку не слід. Звичайно, за умови що пошук в вашому інтернет-магазині працює належним чином.

3. Інформація про наявність

Так, з точки зору пошукової оптимізації, прибирати з вітрини товар, якого тимчасово немає в наявності – шкідливо. Але чи не шкідливо для бізнесу в цілому засмучувати відвідувачів, які нарешті знаходять жадану вінтажну рамку для постерів, додають її в кошик і отримують від магазину сухий відповідь «Вибачте, товару немає у наявності»? Зрештою, купують у вас люди, а не роботи пошукових систем, так що подбати про їх зручність життєво необхідно. Зробіть блок даних про наявність товару помітним з першого погляду, і забезпечте його полем «Повідомити мене при появі товару».

4. Якісні фото

http://mars.te.ua/20-ecommerce-design-tips/Напевно, немає такої експерта по електронній комерції, який жодного разу в житті не заявляв би про важливість якісних фотографій товарів. І всі ці заяви правдиві. По суті, в інтернет-магазині очі покупця грають головну роль – доторкнутись до речі неможливо. Тому якість фотографій завжди повинне бути відмінним. Таким, щоб у покупця виникло відчуття, що він не просто подивився на картинку товару, а реально його помацав. І не обмежуйтеся одним знімком. А якщо у вас є можливість зробити 3D або відеоролик про товар – скористайтеся ним.

5. Кошик

Принципово, є два підходи до реалізації корзини. Перший має на увазі вивід її вмісту при кожному додаванні товару, другий – показ тільки повідомлення про те, що у кошику є обрана річ чи продукт. Незалежно від застосовуваного в вашому інтернет-магазині варіанту, розташовуйте саму кнопку кошика там, де будь-який покупець зможе легко знайти її. У деяких магазинах кошик завжди знаходиться у видимій області, ковзаючи у краю сторінки разом з прокруткою, є і таке рішення. Головне – не примушувати покупця думати про те, що ж йому необхідно зробити для оформлення замовлення. А для того, щоб зробити кнопку кошика ще більш привабливою, можна «ліпити» на неї маленькі копії фотографій доданих товарів.

6. Хлібні крихти

Хлібні крихти – дуже корисний, зручний і ефективний навігаційний інструмент. Вони дозволяють відвідувачеві швидко зорієнтуватися в просторі, зрозуміти, де він знаходиться (особливо корисно при переході з пошукової видачі), швидко переміститься на крок-два-три вище, зрозуміти структуру категорії. Також існують реалізації хлібних крихт, які відображають реальний шлях, пророблений користувачем. Обидва варіанти мають свої переваги і недоліки, і при належній винахідливості можна спробувати їх поєднати. Правда, нам такі оригінальні рішення не траплялися.

7. Мегаменю

http://mars.te.ua/20-ecommerce-design-tips/Мегаменю – величезна вилітає і перекриває помітну частину сторінки накладка зі списком категорій, розділів і т.д. Мегаменю можна побачити на великих майданчик типу eBay, де продається практично все, що завгодно. Таке рішення дозволяє зберегти простоту навігації при складності структури каталогу. Крім того, мегаменю займають зовсім небагато місця в згорнутому стані. Якщо у вашому інтернет-магазині безліч категорій, придивіться до цього виду меню.

8. Остаточна вартість

Ще одна «прописна» істина: вказуйте на сторінці товару / в кошику остаточну вартість. Ніщо так не відштовхує покупця від інтернет-магазину, як додаткові витрати, пов’язані з доставкою, про яких він дізнається вже «на касі». Можливо, ви зможете працювати за єдиною ставкою на всю зону покриття, або ж взагалі пропонувати безкоштовну доставку; щоб з’ясувати це, проведіть відповідні розрахунки. Якщо ні те, ні інше не представляється можливим, упровадите розрахунок вартості доставки на сторінку товару, або запитуйте у користувача передбачуваний адресу (місто) доставки на початку його спілкування з магазином і автоматично модифікуйте всі ціни в каталозі, показуючи потенційному клієнтові саме ту суму, в яку йому справді обійдеться покупка.

9. Кожен піксель

http://mars.te.ua/20-ecommerce-design-tips/

Енді знайшов дійсно чудовий приклад: інтернет-магазин органічної сільгосппродукції Abel & Cole. За запевненням автора, кожен піксель на сторінках цього сайту працює на його успіх. Розробляючи нову вітрину, продумуючи дії та враження користувача, вносячи коректування в працюючий інтернет-магазин, запитуйте себе, чому той чи інший блок виглядає саме так, чим він гарний у порівнянні з іншими варіантами, і головне – яка його питома корисність для вас і ваших клієнтів.

10. SEO

В умовах постійного зростання ринку ecommerce і все конкуренції, що посилюється, пошукова оптимізація – один з ключів до успіху. Дизайн також має відношення до SEO. Так, пошукові машини небайдужі до правильної верстці текстових фрагментів: використовуйте теги H (заголовок) там, де мова дійсно йде про заголовку. Також подумайте про створення текстового блоку, насиченого цікавими вам ключовими словами.

11. Оригінальність

http://mars.te.ua/20-ecommerce-design-tips/

Так чи інакше, дизайн інтернет-магазину повинен бути оригінальним, унікальним хоча б в окремих елементах. Придумати щось нове досить складно, проте без чогось свого, «родзинки», сайт запросто загубиться серед конкурентів. Така оригінальна особливість – те, що запам’ятає відвідувач в першу чергу.

12. Соціальні медіа

Звичайно, нішевий інтернет-магазин садової начиння або чогось подібного навряд чи збере натовпи фанатів в соціальних мережах. І все ж, нехтувати ними не можна, хоча б через SEO-ефекту. Розташування кнопок і посилань на ваші соц. сторінки і потоки – не таке просте завдання, як здається на перший погляд. Блок не повинен домінувати і привертати до себе занадто багато уваги (як ковзні смужки з кнопками на багатьох блогах), при цьому його слід зробити помітним і очевидним для кожного відвідувача. Навіть якщо користувач не лайкает ваш магазин, а просто «тягне» до себе в стрічку класну фотку чи оригінальне опис, ви вже отримуєте прибуток: про ваш магазин дізнається більше людей.

13. Швидкий перегляд товару

http://mars.te.ua/20-ecommerce-design-tips/Швидкий перегляд – зручна функція, яка створює у відвідувача відчуття прискореного просування по каталогу, в процесі якого він приділяє окремим товарам трохи більше уваги. Швидкий перегляд дозволяє поглянути на річ, не покидаючи сторінку її категорії. Навіть якщо по суті користувач отримує ту ж сторінку товару, але в лайтбоксах з затемненням фону, а не на окремій вкладці, перегляд вважається швидким. Однак краще все-таки наповнювати такий лайтбокс чимось середнім між карткою товару в категорії і його окремої повноцінної сторінкою.

14. Підписка на розсилку

Імейл-маркетинг живий, і, швидше за все, буде здоровим ще довго. Тому збір адрес електронної пошти потенційних покупців – важливе завдання. Розташовуйте форму підписки там, де вона затребувана: у блозі, блоці новин, категорії новинок і розпродажів і т.д. При належній інтенсивності публікацій розгляньте можливість запуску декількох окремих новинних листів: одне – для тих, хто хоче першим дізнатися про знижки у вашому інтернет-магазині, друге – з інформацією про нові товари, третє – з цікавими та корисними тематичними матеріалами.

15. Чисті сторінки
http://mars.te.ua/20-ecommerce-design-tips/

У реальному світі нікому не подобається купувати що-небудь в брудному магазині. Те ж саме справедливо і для магазину в інтернеті. Не засмічуйте сторінки категорій і товарів зайвими елементами, намагайтеся використовувати тільки ті блоки, які дійсно потрібні і корисні. Розглядайте кожну сторінку як єдине ціле, і уникайте відчуття розрізненості елементів.

16. Відгуки

Відгуки – важлива складова сучасного споживчого інтернету. Зазвичай вони розміщуються на сторінках товару, однак якщо мова йде про відгуки про магазин в цілому, Енді пропонує розміщувати блок з ними в сайдбарі або у вигляді слайдера. Окрема сторінка з відгуками – це добре, але чи багато народу піде туди?

17. Опції та властивості товару

http://mars.te.ua/20-ecommerce-design-tips/

В інтернет-магазині Victoria’s Secret варіації за розмірами і кольорами речей показані найбільш очевидним чином і зрозумілі відвідувачу без зайвих пояснень. Коли мова заходить про вибір властивостей товару, намагайтеся зробити все можливе, щоб у користувача не виникло питань. Графічне відображення зрозуміліше слів, так що кольори краще позначати саме квітами, інші характеристики – іконками.

18. Чекаут без перешкод

http://mars.te.ua/20-ecommerce-design-tips/Сторінки оформлення замовлення – та сама мета, до якої ви хочете привести покупця. І коли він потрапляє туди, не слід давати йому можливість вийти з чекаута. Приберіть всі зайві посилання і блоки, не намагайтеся продати щось на додаток до того, що вже є в кошику. Чим менше відволікаючих чинників на касі інтернет-магазину, тим вище шанси на продаж.

19. «У корзину»

Очевидне правило: кнопка «В кошик» – заклик до дії, і вона повинна виділятися на тлі інших блоків і елементів інтернет-магазину. За своїм «вазі» вона ні в якому разі не повинна поступатися іншим кнопкам, навіть якщо вам дуже хочеться отримати якомога більше Лайки в соц. мережах.

20. Контакти

http://mars.te.ua/20-ecommerce-design-tips/

Само собою, у багатьох покупців виникне бажання зв’язатися з вами для уточнення нюансів. В ідеалі, інтернет-магазин повинен пропонувати номер 8-800 для безкоштовних дзвінків. Як мінімум, вказуйте свою адресу електронної пошти і звичайний номер телефону, а також пропонуйте відвідувачам відправити вам повідомлення безпосередньо з сайту, за допомогою спеціальної форми. Лайвчат – вікно миттєвого зв’язку із менеджером – може стати хорошим доповненням до «Контакту озброєнню» вашого інтернет-магазину.

Джерело: Ecommerce web design: 20 essential tips

10 кращих CSS3 генераторів

У мене є приємні спогади про CSS2.1. Закруглені кути, можливо, забирало годину горя у фотошопі, але це було просто. Більшість розробників міг згадати кілька десятків властивостей, не звертаючись до довідників кожні дві хвилини.

CSS3 все змінюється. Є 116 нових властивостей * з декількома префіксами постачальників і різних синтаксису. Ніхто не може бути очікую, що ви запам’ятаєте все. На щастя, є номер на безкоштовних онлайн-інструментів, які допоможуть вам створити сучасний CSS3 код, вирізати і вставляти в свої таблиці стилів…

CSS 3.0 Maker

CSS 3.0 Maker є класним інструментом. Ви можете визначити вікно радіусів, градієнти, текст тіні, тіні вікна, перетворення, переходи і повороти, налаштовавши кілька повзунків. Область попереднього перегляду показує результат і вказує, які настільні і мобільні браузери підтримують властивості.

CSS код можна скопіювати з вікна CodeView і завантажити в HTML файл, який демонструє ефект.

LayerStyles.org

Користувачі Photoshop будуть любити LayerStyles. CSS3 ефект визначається за допомогою діалогового стилю шару, який буде відразу ж знайомі, хто використовує Adobe продукти. Це просто, логічно у використанні. Код може бути скопійований з динамічно оновлюватися “CSS код” глядача в нижній лівій частині екрана.

CSS3 Generator

CSS3 генератор використовує майстер-подібний підхід до визначення стилів. Вибрати з різних ефектів, включаючи кордон радіусу, текст тінь, тінь вікна, кілька стовпців, перетворення і переходи. Потім виконаєте кілька блоків застосовувати їх для попереднього перегляду елемента.

CSS3 генератор моменти, які браузери і версії підтримують ефект і, де це можливо, надає IE-конкретний код фільтра.

westciv CSS3 Sandbox

Пісочниця була розроблена CSS3 гуру і SitePoint перекладач для Джон Аллсопп(John Allsopp). Градієнти, текстові ефекти, вікно властивостей і перетворення можна легко регулювати за допомогою повзунків. В результаті коду і вікно попереднього перегляду динамічно оновлюється відповідно.

Інструмент може бути не так красиво, як деякі з її конкурентів, але це швидкий і функціональний.

CSS3 Playground

CSS3 Playground була створена позаштатний розробник Mike Plate. Поряд з підтримкою ряду властивостей CSS3, це єдиний інструмент, який дозволяє переглядати ефекти на більш ніж один елемент і змінити вміст коробки. Дивовижно.

CSS3.me

Якщо ви хочете щось просте, швидке та легке, цей генератор CSS3 може бути інструментом для вас. Підтримує кордони радіуса, коробка тіні, прозорість і простий градієнт фону. Ви також можете запросити IE-спеціальних фільтрів.

CSS3 Button Generator

CSS3 ефект може зробити вигляд кнопки обємнішим без зображень. Генератор CSS3 Button дозволяє налаштувати шрифт, відступи, границі, фон градієнтом, внутрішня тінь, тінь і текст тіні за допомогою вгору / вниз управління, який може бути простіше і логічніше, ніж повзунки.

Поряд з наданням крос-браузерного коду CSS3, інструмент дозволяє зберігати і спільно з іншими стилями. Ви можете переглянути продемонстровані кнопок і настроїти властивості для власного використання.

CSS Tricks Button Maker

Button Maker був розроблений Chris Coyier з хитрості CSS. Хоча вона була задумана як демонстрація технології, що не завадило йому бути корисним для розробників CSS3!

Button Maker не підтримує деякі з найбільш крайніх властивостей CSS3, але це один з небагатьох інструментів, щоб показати ефектів наведення.

Ultimate CSS Gradient Generator

Якщо натиснута, навіть я можу згадати текст-тінь власності. CSS3 градієнти? Ніяких шансів. Градієнти можуть бути потужними, але заплутанимb і, до недавнього часу, WebKit браузерів, що використовуються інший синтаксис. Якщо ви створюєте дуже простий фон, градієнт генератор має важливе значення.

The Ultimate CSS Gradient генератор, ну, в кінцевому підсумку генератор градієнт. Він використовує схожий інтерфейс для Photoshop і створює крос-браузерний код, який включає в себе IE фільтри. Нарешті, градієнти можуть бути збережені і поділився з унікальною посиланням. Ви безумовно хочете, щоб додати цей інструмент.

CSS3 Gradient Generator

Якщо кінцева CSS Gradient Генератор занадто багато зусиль, ви можете віддати перевагу цю альтернативу. Інструмент дозволяє створювати лінійні градієнти, додаючи кольору в будь-яку кількість стоп-окулярів. Старий синтаксис WebKit виробляється, а також Mozilla код, який повинен бути сумісним з іншими браузерами.

Невже я пропустив ваш улюблений коду CSS3 генератор?

Джерело http://www.sitepoint.com/10-best-css3-code-generators/

Градієнт тексту CSS без PNG

Простий спосіб зробити градієт тексту залишається редагованим і вибір тексту веб-сайтів.

h1 {  font-size: 70px;  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

Приклад:

Michael Mars