Masz już świetny pomysł na aplikację i pracujesz wściekle nad jego utworzeniem i uruchomieniem. Lub tworzysz stronę mobilną, aby uzupełnić kompilację pulpitu. A może udoskonalasz projekt komputera stacjonarnego, aby skalować się na urządzeniach?

Niezależnie od tego, jaki masz cel w zakresie rozwoju urządzeń mobilnych, przed uruchomieniem, zróbmy krótką przerwę od tego procesu, aby upewnić się, że nie popełniasz kilku najczęstszych błędów w projektowaniu urządzeń mobilnych.

Zaufaj mi, to jest warte czasu, a Twoi klienci będą ci wdzięczni.

1. Brak doprecyzowania zestawu funkcji

Budując oprogramowanie, łatwo można dać się ponieść dzięki dodaniu wszystkich tych wspaniałych funkcji. "Czy nie byłoby fajnie, gdyby ..." to niebezpieczne określenie, jeśli chodzi o dotrzymywanie terminów i dostarczanie wysokiej jakości oprogramowania.

Jeśli spróbujesz zaimplementować zbyt wiele funkcji, ucierpi zarówno jakość doświadczenia i projektu, nie wspominając już o tym, co stanie się z terminami.

W tym samym czasie nie chcesz się skupiać tak wąsko, że brakuje Ci potencjalnie świetnych pomysłów. I tu pojawia się to zdanie: "Śnij wielkie, małe narzędzie".

Na etapie planowania odkładaj każdy pomysł na papier, bez względu na to, jak niesamowicie brzmi. Nagraj i rozważ to. Miej wielkie marzenia. Wtedy możesz być pewien, że nie pominąłeś żadnych wspaniałych pomysłów.

Refine the feature set

Następnie, gdy zdecydujesz, co zbudować, wybierz tylko kilka rzeczy. Z całej tej listy, którą jedną lub dwie rzeczy można wypuścić na własną rękę? Bądź bezwzględny przy wycinaniu funkcji. Aby odnieść sukces, musisz zacząć od małej.

Po wybraniu jednej lub dwóch funkcji, które zamierzasz zbudować, skup się na budowaniu jakości. Ustaw pasek tak, aby doświadczenie było jak najwyższe. Twoim celem powinno być rozpoczęcie od prostej aplikacji, która jest przyjemnością w użyciu.

Mając to jako punkt wyjścia, możesz wydać wcześniej i dowiedzieć się, czy ktokolwiek naprawdę troszczy się o problem, który rozwiązałeś. Następnie możesz stopniowo dodawać kolejne funkcje, ale tylko wtedy, gdy możesz utrzymać wysoki standard, który już ustawiłeś dla jakości aplikacji. Jeśli nie możesz znaleźć sposobu na zaprojektowanie funkcji o takim poziomie jakości, nie dodawaj jej.

Nigdy nie rezygnuj z doświadczenia dla innej funkcji.

Więc śnij duże, zaimplementuj małe i będziesz na najlepszej drodze.

(Podziękowania dla Dana Cederholma z Dribbble za wprowadzenie mnie do tego zwrotu).

2. Złe ustawienie i odstępy

Deweloperzy często skarżą się, że projektowanie jest trudne. Gdyby tylko było to programowanie analityczne, byłoby im łatwiej. Cóż, masz szczęście. Chcę, abyś używał analitycznej precyzji, aby upewnić się, że wszystkie elementy w projekcie są odpowiednio wyrównane. Nie mam na myśli, że muszą podążać za jakąś wyszukaną techniką projektowania. Mam na myśli tylko to, że wszystko wyrównane do lewej krawędzi powinno być tej samej odległości. Jeśli Twoje marże mają 10px, użyj tego w całym tekście.

Elementy powinny być rozmieszczone konsekwentnie jeden od drugiego i mieć wiele wyściółki między każdym elementem. Wiem, że powiedziano Ci, żeby wcześniej dodać więcej białej przestrzeni, ale to naprawdę ważne.

Spacing and alignment

3. Nie używaj celowników z wielkością palca

Gdy próbujesz dopasować wszystko do ekranu telefonu komórkowego, możesz kusić, by zmniejszyć rozmiar przycisków. Minimalny zalecany rozmiar ekranu to 44 piksele kwadratowe.

Palce i kciuki są w różnych rozmiarach, więc to, co działa dobrze w przypadku małych dłoni, może nie działać dla kogoś o dużych rękach. Utrzymując cele tap większe niż to minimum, unikniesz frustrujących użytkowników.

Finger-sized buttons

Tylko dlatego, że twój cel kliknięcia musi mieć kwadrat o wielkości 44 pikseli, nie oznacza, że ​​sam kontur przycisku musi być. Możesz zwiększyć obszar docelowy większy niż sam przycisk, aby niedokładne dotknięcia nadal wyzwalały przycisk. Jeśli twój przycisk nie jest tuż obok innych elementów z działaniem dotknięcia, to przycisk może być rzeczywiście trochę większy bez zmiany wizualnego wyglądu

4. Używanie bułki tartej w nawigacji

Wyobraź sobie, że przeglądasz aplikację i wykonałeś swoją pracę na 4 poziomach. Po przeczytaniu tej zawartości chcesz przejść na wyższy poziom, ale przypadkowo dotknij poziom "Strona główna" w bułce tartej. Oooo. To jest jak przycisk resetowania do poprzedniego przeglądania pracy w tej sekcji. Stwierdziliśmy już, że z powodu małych celów dotykowych użytkownicy często przypadkowo dotykają niewłaściwych elementów.

Prosty przycisk "Wstecz" jest zalecany na pasku tytułowym aplikacji (nie jest to konieczne na urządzeniach z Androidem z przyciskiem powrotu sprzętu). Wielu programistów uważa, że ​​ułatwiają one pracę użytkownikom, dodając nawigację w stylu nawigacyjnym do nagłówka, umożliwiając użytkownikom powrót do wybranego poziomu.

Zaleca się, aby przycisk Wstecz zmieniał etykietę na podstawie strony, na którą zostanie przeniesiony. Mogłaby więc przeczytać "Ustawienia" lub "Użytkownicy" w zależności od tego, jaki był poprzedni widok.

Breadcrumbs

5. Loga w paskach tytułowych

W celu wyraźniejszego oznakowania aplikacji, projektanci często umieszczają logo firmy w widocznym miejscu na pasku tytułu, zastępując nazwę strony w procesie. Jest to w porządku na pierwszej stronie, na której użytkownik może nie potrzebować kontekstu. Ale na kolejnych stronach chcesz zarezerwować miejsce w pasku tytułowym dla tytułu strony. Pomaga to kontekstowi użytkownika i informuje go o treściach, które powinny znaleźć się w dalszej części strony.

Aplikacja Twitter na iPhone'a radzi sobie z tym dobrze, umieszczając proste logo na pasku tytułowym pierwszej strony, ale na wszystkich kolejnych stronach zastępując je standardowym tekstem tytułu.

Logos

Jeśli Twój projekt wymaga silniejszego brandingu, powinieneś ponownie przejrzeć schematy kolorów i style, a nie tylko wymusić na interfejsie większe logo.

6. Nie testowanie użyteczności

Nie jesteś w stanie dokładnie ocenić użyteczności projektów, nad którymi blisko pracujesz. Koncepcje, które mogą wydawać się skomplikowane, przychodzą ci na myśl, gdy jesteś w nich zanurzony od wielu miesięcy. Co się dzieje, to przeglądamy i testujemy własne oprogramowanie, nie zdając sobie sprawy z własnych uprzedzeń. Nie wydawanie opinii z zewnątrz jest ogromnym błędem. Nie chcesz, aby po raz pierwszy dowiadywałeś się, że ekran nie jest intuicyjny, kiedy telefonuje klient, który chce się narzekać.

Testowanie użyteczności ma kluczowe znaczenie dla procesu projektowania. Dlaczego więc tak wielu ludzi tego unika? Proste: nie zdają sobie sprawy, jak łatwo jest to zrobić. Kiedy mówię o testowaniu użyteczności, nie mam na myśli zatrudniania firmy w białych płaszczach do tygodniowego badania, w którym dokładnie analizują swój projekt.

Zamiast tego znajdź znajomego, który nigdy wcześniej nie słyszał o Twojej witrynie. Zacznij od podania im odrobiny kontekstu, np. "Co sądzisz o tej liście zadań do zrobienia?" Nie musisz nawet mówić im, że to twoja (opinia może być bardziej dosadna). Następny krok jest łatwy: po prostu obserwuj, jak go używają . Zwróć uwagę na ekrany, na których utknęły, kiedy zatrzymują się, aby przeczytać tekst i kiedy po prostu zaczynają naciskać przyciski. Szybko odkryjesz obszary, które nie są tak intuicyjne, jak mogłyby być.

Testing

Często drobne zmiany będą miały ogromne znaczenie. Dobrze umieszczona podpowiedź może być wystarczająca do wyjaśnienia koncepcji i pokazania użytkownikowi, gdzie dotknąć dalej. Testuj nieformalnie i spróbuj z 3-5 osobami. Dowiesz się dużo.

Wniosek

Istnieje wiele błędów, które możesz popełnić, ale ta krótka lista pomoże Ci zacząć. Dwa najważniejsze pojęcia to udoskonalanie zestawu funkcji i testowanie użyteczności. Zrób to dobrze, a wszystko inne znajdzie się na swoim miejscu.

Jeśli ten post opisuje części Twojego mobilnego doświadczenia, nie martw się. Wszystkie są łatwe do popełnienia. Ale jeśli ich unikniesz, Twoja mobilność stanie się bardziej czysta i skupiona.

Czy robiłeś jakieś, a może wszystkie, te błędy? Co nie chcesz dodać do projektowania mobilnego? Daj nam znać w komentarzach poniżej.