Przestań być taki kwadratowy
Jako profesjonalny projektant jesteś zaznajomiony (i prawdopodobnie przyczyniasz się) do zwiększonego wykorzystania kręgów we wszystkich elementach projektu.
Od domowych elementów dekoracyjnych, takich jak okrągłe oprawione lustra i nadruki, aż po narzędzia ręczne w sklepie z narzędziami, kręgi są wszędzie. Kręgi trafiły nawet na nasze strony internetowe, wyświetlając się w nagłówkach, menu i czasami klikając na środku strony.
Kilka witryn z projektami stworzyło nawet blogi, w tym świetne zrzuty ekranu z twórczego wykorzystania kręgów w projektowaniu stron internetowych. Jednak niewiele zostało powiedziane na temat psychologii za pomocą kręgów w projektowaniu, lub w jaki sposób reakcja użytkownika na kręgi może być skutecznie włączona w rosnące zjawisko mobilnego użytkowania.
Wiemy, że lubimy kręgi, ale dlaczego? A w jaki sposób projektant stron internetowych najlepiej wykorzystuje kręgi, aby zoptymalizować wygodę użytkownika w projektowaniu responsywnym?
Okręgi i mózg
Poznanie i percepcja
Kręgi przemawiają do ludzi, ponieważ są łatwiejsze do zrozumienia niż kształty i obiekty z twardymi liniami.
Oko jest przyciągane do kręgów i informacji zawartych w nich, i są one szybsze i łatwiejsze do przetworzenia przez mózg niż ostre kwadraty i prostokąty.
Szwajcarski matematyk i fizyk Jurg Nonni, autor Visual Perception, sugeruje, że usunięcie krawędzi pozwala nam szybciej postrzegać obiekt. Według Nonni "Prostokąt z ostrymi krawędziami rzeczywiście wymaga nieco bardziej poznawczego widocznego wysiłku niż na przykład elipsa o tym samym rozmiarze. Nasze "fovea-eye" jest jeszcze szybsze w nagrywaniu koła. Krawędzie obejmują dodatkowe narzędzia do obrazowania neuronowego. Proces jest zatem spowolniony. "
Znajome i kojące krzywe
Oprócz zdolności poznawczych mózgu do przetwarzania kręgów szybciej niż może to robić kwadraty i prostokąty, przetwarzamy znane informacje i obiekty szybciej niż te, których nie rozpoznajemy.
Każdy rozpoznaje kręgi, a ludzie uczą się łączenia kształtów z określonymi działaniami i rezultatami, takimi jak uniwersalny czerwony ośmiokąt "STOP". Zgodnie z wytycznymi interfejsu ludzkiego systemu OS X firmy Apple: "Ludzie uczą się kojarzyć określone zachowania z określonymi elementami na podstawie ich wyglądu. Na przykład ludzie rozpoznają przyciski po zaokrąglonym kształcie. "
Efektywne wykorzystanie kółek w kultowych elementach menu Azonmedia Strona z usługami.
Kręgi, owale i obiekty o zaokrąglonych krawędziach napotykamy w wielu ciepłych i pozbawionych zagrożeń sposobach w różnych kulturach i środowiskach. Chmury, jajka, słońce i księżyc w naturze wszystko wydaje się zaokrąglone gołym okiem. Buźki, ciasta, ciasta, kręte figury są miłe dla zmysłów.
Nasze mózgi dobrze reagują na okręgi i krzywe, postrzegając twarde obiekty jako ostrzejsze, bardziej zdefiniowane i potencjalnie stanowiące zagrożenie.
Kręgi i wrażenia użytkownika
Kręgi są skuteczne w projektowaniu stron internetowych właśnie z tych powodów.
Użytkownicy online są niecierpliwie niecierpliwi, a ponieważ kręgi są łatwiejsze do zrozumienia i zrozumienia, przetwarzanie informacji, które reprezentują, zajmuje mniej czasu.
Użytkownicy mobilni są jeszcze bardziej niecierpliwi. Są też zajęci, często w ruchu, wielozadaniowość i używanie palca wskazującego lub kciuka do poruszania się po swoim podręcznym urządzeniu. Chcą swoich informacji TERAZ. Kręgi pomagają użytkownikom mobilnym precyzyjniej wyszukiwać informacje, których szukają.
Okręgi i kciuki
Innym sposobem, w jaki kręgi są korzystne w pierwszym przenośnym, a elastyczne środowisko projektowe jest ich przydatność jako elementów w interfejsach dotykowych.
Jako smartfony z ekranem dotykowym i użytkownicy tabletów dotykając palcem, przesuwając lub kciukiem do szukanych informacji, warto używać kręgów do kierowania użytkownika. Nie tylko naśladują kształt koniuszka palca, kojarzą okręgi i zaokrąglone krawędzie z przyciskami, a nasze mózgi szybko przetwarzają wymagane działania.
twórca stron internetowych Oliver James Gosling
Gdy wkomponujesz kręgi w mobilny interfejs ekranu dotykowego, zaprojektuj go na najmniejszy ekran. Tekst lub obrazy w kręgu muszą nadal być łatwe do odczytania, a rozmiar musi pozostać co najmniej wielkości czubka palca lub 44 pikseli.
Okręgi i miejsce na ekranie
Dobrą wiadomością na temat używania kręgów w responsywnym projekcie jest to, że CSS3 znacznie upraszcza wymagania dotyczące kodowania.
Złą wiadomością jest to, że kręgi zajmują dużo nieruchomości i skutkują większą powierzchnią otwartego ekranu.
Ponieważ przestrzeń ekranu na smartfonach i tabletach może być dość mała, jak możesz wprowadzić kręgi bez obawy, że staną się tak małe, że nie można ich odczytać, dotknąć lub kliknąć?
Prosty interfejs mobilny
Pomaga utrzymać prosty interfejs mobilny. Ponieważ oko jest przyciągane do kółka, nie ma sensu zagracać reszty ekranu treściami, których użytkownik nie zauważy.
O ile nie są częścią nagłówka lub logo, zachowaj okręgi do minimum jednej lub dwóch na każdej stronie. Spróbuj użyć okrągłego przycisku wyszukiwania lub użyj go do wezwania do działania, takiego jak "zadzwoń tutaj" lub "zarejestruj się tutaj".
Gravitate Design używa okręgów i kolorów, aby przyciągnąć wzrok do logo, portfolio i tekstu na stronie głównej.
Tła i przyciski udostępniania
Podobnie jak w przypadku każdego elementu projektu, użycie kół musi odpowiadać treści, produktowi lub usłudze, stylowi i marce witryny. Powinno to zwiększyć komfort użytkownika i uprościć interfejs.
Jeśli wezwanie do działania nie jest odpowiednie dla witryny lub jeśli elementy nawigacyjne i menu po prostu nie działają w kręgu, należy rozważyć umieszczenie koła w tle. Użyj większego okręgu w tle, aby przyciągnąć oko do najważniejszego fragmentu strony (półprzezroczysty za tekstem).
Pamiętaj, że to właśnie treść jest dla użytkownika mobilnego. Zachęcaj użytkowników do zaangażowania, wybierając okrągłe przyciski udostępniania w mediach społecznościowych zamiast opcji prostokątnych.
Okrągłe ikony w responsywnym projekcie
Jednym z bardziej popularnych sposobów włączania kręgów do witryn jest jak ikony w menu. Odpowiada to dobrze projektowi, ponieważ zastępuje długi i / lub mylący tekst prostszym obrazem.
Buza używa kręgów do uzupełnienia pionowego menu mobilnego.
Okrągła ikona zajmuje mniej miejsca, co zapewnia więcej miejsca na treści. Wygląda dobrze, a użytkownik szybko przetwarza to, co reprezentuje.
Owale lub zaokrąglone prostokąty
Może nie jesteś gotowy, aby owinąć ramiona wokół dużego starego koła. W porządku. Ale nie trzymaj się twardych krawędzi.
Dodaj zaokrąglone prostokąty lub owale do swojego zestawu narzędzi do projektowania responsywnego. Wygładzone rogi ułatwią skupienie się na treści w krzywych, zamiast przyciągać uwagę do zewnętrznych krawędzi.
Ostatnie słowo
Podczas gdy projektanci stron internetowych mogą spędzać godziny bolesne nad zaletami kręgów lub zaokrąglonych prostokątów w porównaniu z ostrymi krawędziami, jeśli chodzi o zadowolenie użytkownika z mobilnego projektu, wszystko zależy od zawartości. Użytkownik chce angażować i przydatne treści przedstawione w prosty i łatwy do znalezienia interfejs. Wszystko inne jest wtórne.
Choć responsywny projekt strony internetowej ma na celu reagowanie na środowisko, powinien również odpowiadać na potrzeby użytkownika. Użytkownicy rozpoznają znajomy kształt okręgu, szybko go dostrzegają i mogą łatwo wskazać klikalny punkt na ekranie. Użyj prostego kręgu w następnym projekcie responsywnego projektu. Twoi użytkownicy będą Ci za to wdzięczni.
Czy używasz kręgów do wezwania do działania? Czy grasz bezpiecznie z subtelnie zaokrąglonymi prostokątami? Daj nam znać w komentarzach poniżej.
Wyróżniony obraz / miniatura, obrazuje koła przez Shutterstock