Gdzie umieszczać przyciski w swoim designie, aby były bardziej klikalne? (UX)
W dzisiejszym odcinku Słabego Designu, Paweł Maksławiak omawia istotny temat fit slow, skupiając się na tym, gdzie lokalizować guziki oraz jakich powinny być rozmiarów, aby były jak najlepiej klikalne. Na początku Paweł przedstawia zagadkę, zadając pytanie, gdzie powinien znajdować się guzik, aby można go było najłatwiej kliknąć. Zachęca widzów do dzielenia się swoimi odpowiedziami w komentarzach, a rozwiązanie podaje na końcu filmu. To interaktywne podejście angażuje widzów i sprawia, że temat staje się bardziej przystępny.
Paweł wprowadza również badania przeprowadzone przez Paula Morrisa Fritza w 1954 roku, które udowodniły, że im mniejsza odległość i większa szerokość guzików, tym łatwiej je celować. To ciekawy fakt, który doskonale ilustruje, jak teoria ma zastosowanie w praktyce. Warto zauważyć, że Słaby Design przekłada te badania na współczesne projekty interfejsów, sugerując, że odpowiednie ustawienie i rozmiar guzików mają ogromne znaczenie dla doświadczeń użytkowników.
Przy okazji, Paweł wskazuje na ważne zasady przy projektowaniu interfejsów. Użytkownicy często korzystają z klawiatury i myszki, a umiejscowienie guzików w odpowiednich miejscach, jak dolny lewy róg ekranu dla Windows, znacznie podnosi komfort korzystania z aplikacji. Na przykład, gry projektowane przed laty wymagały często precyzyjnego klikania w małe obszary, co powodowało frustrację. W nowoczesnych produkcjach, takich jak gry Hopa, obszar do klikania jest znacznie większy, co znacznie ułatwia rozgrywkę.
Co więcej, Paweł porusza temat optymalizacji nawigacji w aplikacjach i stronach internetowych. Podaje sugestie, jak zwiększyć pole robocze przy guzikach i minimalizować odległości między nimi, co znacznie wpływa na użyteczność interfejsu. Ciekawe jest to, że często w grach elementy interakcji są projektowane w taki sposób, by wymusić na użytkowniku intuicyjne klikanie, co znacznie ułatwia grę oraz sprawia, że staje się ona bardziej wciągająca.
Na końcu Paweł zdradza odpowiedź na swoją zagadkę. Okazuje się, że guziki powinny być zlokalizowane wokół kursora, co sprzyja efektywności klikania. Przykłady w grach, takich jak Sims, ilustrują, jak przyjazne projektowanie może zwiększyć komfort użytkowania. Podczas pisania tego artykułu, odcinek Słabego Designu posiadał 2355 wyświetleń oraz 78 polubień, co świadczy o rosnącym zainteresowaniu tematem projektowania interfejsów wśród widzów. Paweł zwraca się do swoich widzów z prośbą o subskrypcję kanału, co jeszcze bardziej angażuje ich w rozwój tej fascynującej tematyki.
Toggle timeline summary
-
Wprowadzenie do tematu rozmieszczenia i rozmiarów przycisków dla lepszej klikalności.
-
Prezentacja badania dotyczącego umiejętności motorycznych związanych z rozmieszczeniem przycisków.
-
Pytanie postawione publiczności na temat idealnego rozmieszczenia przycisków.
-
Historyczne odniesienie do badań Paula Morrisa Fritz'a z 1954 roku.
-
Dyskusja na temat tego, jak szerokość wpływa na celowanie w przyciski.
-
Wizualizacja wskazówek dotyczących celowania w przyciski przy krawędzi.
-
Link dla widzów, aby samodzielnie zbadać badanie.
-
Zastosowanie wyników w projektowaniu interfejsów, szczególnie w grach.
-
Badanie wpływu rozmiaru i rozmieszczenia przycisków na trudność gry.
-
Porada dotycząca minimalizowania odległości między przyciskami w projektowaniu aplikacji.
-
Rewelacja rozwiązania zagadki dotyczącej optymalnego rozmieszczenia przycisków.
-
Przykłady menu kontekstowych w aplikacjach związanych z rozmieszczeniem kursora.
-
Dyskusja na temat trendów UI w różnych grach, które poprawiają doświadczenia graczy.
-
Podsumowanie i zaproszenie do subskrypcji kanału.
Transcription
Dzisiejszy odcinek będzie na temat fit slow, czyli gdzie lokalizować guziki i jakich powinny być rozmiarów, aby były jak najlepiej klikalne. KONIEC NAPISÓW Chciałbym Wam przedstawić pewne badanie, które opisuje naszą motorykę, z którego bardzo często korzystamy, będąc tego nieświadomym, projektując nasze interfejsy, ale zanim o nim powiem mam dla Was zagadkę. ZAGADKA W którym miejscu powinien znajdować się guzik, aby było go jak najłatwiej kliknąć? Jeżeli macie jakieś propozycje, wpisujcie je w komentarzach, czy to pod YouTubem, czy to pod Facebookiem, a rozwiązanie zagadki będzie na sam koniec filmu. Jak się domyślasz pod tytule odcinka, osobą, która zbadała to, w którym miejscu lokalizować guziki i jakich powinny być rozmiarów, aby były jak najbardziej klikalne, był Paul Morris Fritz i zbadał to w 1954 roku. W uproszczeniu wzór ten nam mówi, że im mniejsza odległość i im większa szerokość guzików, tym łatwiej je wycelować i wiedział to pewien Pan z wąsem na długo przed tym, jak badania zostały oficjalnie opublikowane. No dobrze, to może jeszcze powiem w dwóch słowach o co chodzi z tą szerokością, bo nie do końca może być to dla wszystkich intuicyjne. W zależności od tego, gdzie znajduje się kursor i jakich rozmiarów i gdzie znajduje się guzik, to ta szerokość po prostu może się zmieniać, ponieważ celując kursorem albo możemy nie dojechać, albo możemy przystrzelić. I teraz taka mała ciekawostka, zakłada się, że krawędzie monitora mają nieskończoną szerokość, ponieważ nieważne jak mocno poruszysz myszą, czy to w lewo, w górę, w dół, to nie da się wyjechać myszą poza ekran monitora, więc może już się wydawać, że to jest jakaś pewna podpowiedź, jaka jest odpowiedź na naszą zagadkę, gdzie lokalizować guziki, żeby były jak najlepiej klikalne. Ale jeżeli myślisz, że tuż przy krawędzi monitora, to nie jest jeszcze prawidłowa odpowiedź. Mniej więcej znacie już tu teorię i sami możecie spróbować w praktyce, czy to prawo w ogóle obowiązuje. W opisie filmu znajduje się link, który przekieruje Was do badania, które zostało wykonane w fantastycznej bibliotece D3. Sami możecie zobaczyć, czy praktyka idzie za teorią, więc wyklikajcie, jak już to zrobicie, wróćcie, to powiem Wam co nieco na temat zastosowań tego prawa w praktyce. Mniej więcej połowa z Was ogląda ten materiał na komputerze, więc proszę spuszcie na dół, na klawiaturę i zobaczcie, że część guzików jest po prostu większa. Jeżeli korzystacie z Windowsa, to nie jest to przypadkiem, że guzik start znajduje się w dolnym lewym rogu, a jeżeli korzystacie z Maca, to cały dolny pasek, cała dolna krawędź jest przeznaczona na nawigację między aplikacjami. A jak jeszcze można wykorzystać tą wiedzę, aby projektować lepiej interfejsy graficzne, albo na przykład projektować gry? Nie bez przyczyny mówi się, że gry sprzed 15 lat były znacznie trudniejsze niż to, co jest obecnie. Weźmy taki przykład gry Hopkins FBI, gdzie mamy jakąś zagadkę i obszar roboczy, w który trzeba było kliknąć był dosyć mały. Nawet były gry, w których mówiło się, że jest to wręcz frustrujące, że trzeba kliknąć konkretnie w dany piksel, żeby rozwiązać zagadkę. A jak wyglądają gry współcześnie, na przykład z typu Hopa? Wyglądają w ten sposób, że obszar roboczy jest całkiem duży, więc dosyć ciężko się pomylić, dosyć ciężko nie trafić w wymagany element. Wyobraźmy sobie dodatkowo, że w grze Hopkins FBI dodamy jeszcze ten czynnik czasu, że trzeba między jakimiś elementami klikać w jakimś ograniczonym czasie. Zwiększając lub zmniejszając pole, w które można klikać, zdecydowanie możemy wpływać na poziom trudności gry. A jak to prawo wykorzystać, jeżeli chcemy poprawić jakąś stronę internetową, żeby na przykład nawigacja była tip-top? Jeżeli posiadasz guzik, który w zasadzie jego pole robocze ogranicza się tylko i wyłącznie do tekstu, do hiperłącza, to zrób to większe i jeszcze większe. A jeżeli na przykład masz aplikację i wiesz, że część funkcji jest ze sobą powiązanych, no to zminimalizuj odległości między tymi guzikami, tak żeby użytkownik miał jak niełatwiejszy dostęp do innych opcji. Na pewno, jeżeli mówimy o czymś, czego trzeba unikać przy projektowaniu jakiejś aplikacji, to jeżeli na przykład mamy modale albo mamy jakąś sekwencję działań, to należy unikać takiego ruszania się modala, jeżeli mamy sekwencję, czyli jeżeli ktoś klika dalej, dalej, dalej, dalej, to nie róbmy tego, żeby musiał cały czas latać i szukać tego guzika, żeby w niego kliknąć. Fajnym przykładem, jak to jest zrobione jest pewna gra bitcoinowa, hazardowa, czyli Bidzong, gdzie w zasadzie cały ten flow jest tak zaprojektowany, że grając kolejne gry cały czas nie musimy w ogóle ruszać myszką, ale jeżeli na przykład ktoś chce wyjść z danej gry i weźmie na przykład pieniądze, to od razu pod jego myszką pojawia się guzik wpłać więcej pieniędzy, czyli jest gdzieś zaprojektowany jakiś flow i to, że gdzieś myszka jest w danym miejscu, ułatwia albo może prowadzić do kolejnego etapu, może w jakiś sposób nakierowywać użytkownika, co ma kliknąć dalej. Pora na rozwiązania zagadki, więc jeżeli nie guzik na krawędzi jak w narożnikach, to gdzie je zlokalizować? Bezpośrednio tam, gdzie znajduje się ten kursor, tak jak było powiedziane na przykładzie Bidzonga. I bardzo wiele aplikacji to stosuje, jeżeli na przykład wciśnie się prawy guzik myszy, wychodzi menu kontekstowe. Ale pewnie tak jak kojarzycie, tak jak jest na Macu, tak jak jest na Windowsie, menu to zazwyczaj schodzi w dół. Ale to nie jest jedyne rozwiązanie, na przykład w Simsach rozmieszczenie tych elementów jest wokół bezpośrednio kursora i jeżeli na przykład chcemy mieć szybki dostęp do czwartej opcji, to nie musimy scrollować całej listy, tylko ta odległość jest dużo mniejsza. I jest to wbrew pozorom dosyć popularne właśnie też w grach komputerowych, na przykład w PUBG, PlayerUnknown, Battleground, więc cały czas jakby te rzeczy są w obiegu. Ok, to wszystko na dzisiaj. Zrobisz mi wielką przyjemność, jeżeli zasubskrybujesz ten kanał. No a na dzisiaj to już wszystko. Pozdrawiam, Paweł Maksławiak.