MENU

Komentarzy (0) eye candy

Z cyklu “Eye Candy Miesiąca”

angi-lizak-_3-1280-

Wpisując w popularną wyszukiwarkę frazę “eye-candy”, otrzymamy w wynikach setki linków, głównie odnoszących się do popularnego serialu MTV o takim samym tytule :) To, co chcielibyśmy Wam przedstawić, to nie najlepsze wątki tego filmu, a najciekawsze interakcje jakie osładzają nam korzystanie z serwisów www czy aplikacji. Każdy z nas niemal każdego dnia trafia na kilka przykuwających wzrok detali. W sieci jest coraz więcej elementów, które uatrakcyjniają strony. Jednak to, co jest dużym sukcesem projektanta, to stworzenie takiej interakcji, która zostaje w pamięci na dłuższą chwilę po wyjściu z serwisu, a największym, jeśli użytkownik wraca tylko po to, żeby znów na nią spojrzeć.

W każdym miesiącu przedstawimy Wam kilka typów naszego teamu. Niektóre z nich prezentują wyjątkowy kunszt graficzny, inne są bardzo użyteczne, a zdarzają się również takie, które są połączeniem jednego i drugiego.

Zapraszamy do lektury.

 

MIRA

Czerwcowym typem Miry, naszego UX designera, jest element strony dający feedback użytkownikowi na zasadzie paska postępu. Przewijając stronę w dół, zielony kolor zdaje się wypełniać szary fragment grubej linii w pozycji fixed, dając użytkownikowi informację, ile procent artykułu zostało już wyświetlone. Element ten jest nie tylko wizualnie przyjemny, ale daje też użytkownikowi feedback, który pozwala na lepsze moderowanie swojej aktywności w sieci, a co za tym idzie, zwiększa poczucie kontroli nad stroną.

 

 

Źródło: http://www.youthministrymedia.ca/programs/design/graphic-trends-for-2015-infographic/

“Pokazanie średniego czasu czytania artykułu to świetna sprawa na blogu lub stronie. Na podstawie badań i analiz wiemy, że użytkownicy często czytają w podróży kiedy udają się do pracy lub z niej wracają, a czasem nawet w jej trakcie. To trochę jak informacja o czasie przygotowania potrawy w przepisie kulinarnym. Wiemy czy warto w ogóle rozpoczynać czytanie, bo akurat mamy jeszcze tyle czasu czy może lepiej odłożyć to na później. Niby nic wielkiego, ale w danym kontekście może być bardzo użyteczne.”

 

jjaro

Jarek, nasz projektant graficzny, podzielił się swoją inspiracją ze strony http://www.timeshift165.com/, na której możemy “własnoręcznie” odkryć model czerwonego cabrioleta delachey. Ten element nie ma szczególnej funkcji na stronie, nie służy do nawigacji, nie pomaga w realizacji żadnego procesu. Sposób, w jaki jest zaprojektowany gwarantuje jednak, że użytkownik pozostanie przez chwilę dłużej w serwisie i chętnie “pobawi” się tą interakcją.

 

Źródło: http://www.timeshift165.com/

 

“Ta interakcja z użytkownikiem jest naprawdę na wysokim poziomie pod kątem dopracowania szczegółów. Widać dbałość o detal i dobrą technikę projektową. Zwykle nie przepadam za tanim efekciarstwem, ale tak ciekawie i dobrze przygotowany gadżet na pewno przykuje wzrok użytkownika i zapisze się na jakiś czas w jego pamięci. Poza tym fakt, że nad wizualizacją tą mamy kontrolę w postaci poruszania czarną płachtą na pięknym czerwonym samochodzie, daje dodatkowe pozytywne wrażenie. Całkiem niezłe eye candy.”

 

piotr kozak

Piotr, Head of UX naszego zespołu, przy okazji szukania dynamicznej walidacji formularzy znalazł się na stronie sklepu Asos. Jego wzrok przyciągnął niestandardowy sposób oznaczania pól, do których wprowadzono poprawne dane. Ponadto jego uwagę przykuło pozytywnie budowane doświadczenie z użytkownikiem poprzez wprowadzanie żartobliwego elementu jak licznik “nocy pozostałych do urodzin”, który pojawia się po wpisaniu swojej daty urodzenia.

 

Źródło: https://my.asos.com/register?lang=en-GB&returnurl=https://www.asos.com/pgecustlogin.aspx?backurl=http://www.asos.com/

 

 

“Ten formularz jest przykładem jak w łatwy i prosty sposób można zaskoczyć odbiorcę. Nie ma tu przecież fajerwerków, ale wystarczy odwrócić formę komunikacji, żeby pozyskać dodatkową uwagę użytkownika. Zwykle używając walidacji, wskazujemy na pola, w których wprowadzony został niepoprawny format danych. Tu jest zupełnie odwrotnie. Użytkownik dostaje “nagrodę” za to, że poprawnie uzupełnił dane pole, a nie tylko “ostrzeżenie” jeśli mu się nie uda. Podobny rodzaj niestandardowej i przewrotnej informacji znajdziemy po wpisaniu daty urodzenia. Dostaniemy informację nie ile dni zostało do naszych urodzin, a ile nocy, co samo w sobie jest zaskakujące.”

 

Kasia Rychcińska

Ja natomiast polecam Wam wizytę na stronie http://hellomonday.com/. Jako UX , w sieci zwykle poszukuję wyjątkowych funkcjonalności, tym razem jednak urzekła mnie sama forma serwisu. Poniżej prezentuję jej element, który korzystnie wyświetla się w tego typu formacie, jednak cała strona zbudowana jest w oparciu o lekkie i nieekspansywne animacje cieszące oko.

 

 

Źródło: http://hellomonday.com/

 

Moim faworytem na tej stronie jest case j.viewz the DNA Music Project – jego zajawka wyświetlana jest na tle zdjęcia klifu, na które dodana jest ażurowa grafika. Kompozycja ta połączona z animacją ruchu daje wrażenie trójwymiarowości, przyciągając uwagę w bardzo dyskretny sposób. Ciężko jest przedstawić to wrażenie za pomocą gifu czy screena więc zachęcam Was do przeklikania sobie strony i zdobycia własnych wrażeń.

Gdybym miała określić dlaczego akurat ta strona zwróciła moją uwagę, ciężko byłoby mi rozebrać to doświadczenie na poszczególne elementy. Po prostu lubię tam wracać i to jest właśnie istota tej emocji, którą powinny wywołać dobre eye candy.

W kolejnym miesiącu przedstawimy Wam typy pozostałych członków naszego teamu. Jeśli macie swoje ulubione eye candy lub chcecie się podzielić przykładem jakiejś ciekawej animacji czy interakcji, zapraszamy do kontaktu.

Komentarze

Katarzyna Rychcińska on email2
Autor artykułu:
Katarzyna Rychcińska
UX Designer - Ideacto
UX Designer w Ideacto, kreatywnej agencji eCommerce z Grupy Divante. Studiuje HCI oraz psychologię biznesu. Prywatnie entuzjastka użyteczności na pograniczu offline i online oraz UX w przestrzeni miejskiej. Wybrani klienci: Enea, Stalgast, Duka, Knauf, Ergom.