Where to place buttons in your design to make them more clickable? (UX)
In today's episode of Słaby Design, Paweł Maksławiak discusses the important topic of fit slow, focusing on where to locate buttons and what sizes they should be to ensure maximum clickability. He begins with a riddle, asking viewers where a button should be positioned to make it the easiest to click. Viewers are encouraged to share their answers in the comments, and the solution is revealed at the end of the video. This interactive approach engages viewers and makes the topic more accessible.
Paweł also introduces research conducted by Paul Morris Fritz in 1954, which demonstrated that the smaller the distance and the larger the width of buttons, the easier they are to target. This intriguing fact perfectly illustrates how theory applies to practice. Słaby Design translates these findings into contemporary interface projects, suggesting that proper placement and sizing of buttons are crucial for user experience.
Additionally, Paweł points out important guidelines when designing interfaces. Users often rely on keyboards and mice, and placing buttons in appropriate positions, such as the lower left corner of the screen for Windows, significantly enhances usability. For instance, games designed years ago often required precise clicking in small areas, which led to frustration. In modern productions, like Hopa games, the clickable area is much larger, making gameplay significantly easier.
Moreover, Paweł discusses optimizing navigation in apps and websites. He offers suggestions for increasing the clickable area of buttons and minimizing distances between them, which greatly impacts interface usability. Interestingly, in games, interaction elements are often designed to encourage intuitive clicking, increasing immersion and making gameplay more engaging.
At the end, Paweł reveals the answer to his riddle: buttons should be located around where the cursor is, which promotes effective clicking. Examples from games like The Sims illustrate how user-friendly design can enhance usability. As of the writing of this article, the episode has garnered 2355 views and 78 likes, indicating a growing interest in interface design among viewers. Paweł invites his audience to subscribe to his channel, further engaging them in this fascinating topic.
Toggle timeline summary
-
Introduction to the topic of button placement and sizes for better clickability.
-
Presentation of a study regarding motor skills related to button placement.
-
Question posed to the audience about ideal button placement.
-
Historical reference to Paul Morris Fritz's research from 1954.
-
Discussion on how width affects targeting buttons.
-
Visualization of edge-related targeting tips for buttons.
-
Link provided for viewers to explore the study themselves.
-
Application of findings to interface design, especially in games.
-
Exploration of button size and placement effects on game difficulty.
-
Advice on minimizing button distance in application design.
-
Revelation of the riddle's solution regarding optimal button placement.
-
Examples of context menus in applications concerning cursor placement.
-
Discussion on UI trends in various games for enhancing player experience.
-
Closing remarks and invitation to subscribe to the channel.
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.