12 sztuczek do projektowania interfejsu użytkownika aplikacji mobilnych i internetowych, o których nikt Ci nie mówił – aż do teraz
Opublikowany: 2016-02-28[ Proto .io to narzędzie do prototypowania aplikacji mobilnych używane przez przedsiębiorców i startupy do tworzenia w pełni interaktywnych realistycznych prototypów, które wyglądają i działają jak prawdziwe aplikacje.]
Zapytaliśmy siedmiu projektantów interfejsu użytkownika, programistów i przedsiębiorców, jakich sztuczek związanych z projektowaniem interfejsu użytkownika w aplikacjach mobilnych i internetowych nauczyli się na własnej skórze lub zdarzyło im się nabyć w trakcie swojej kariery. Albo nikt nigdy nie powiedział im o tych wskazówkach, albo wydaje się, że nikt nie wie o problemach, kiedy je poruszają. W każdym razie, oto 12 rzeczy, których teraz nie musisz uczyć się metodą prób i błędów — chyba że już masz!
3 najlepsze sztuczki projektowe od Duffy
John Geletka jest wiceprezesem wykonawczym ds. strategii cyfrowej w Duffy (@duffydesignx), agencji z ponad 30-letnim doświadczeniem w projektowaniu. Oto kilka sztuczek, które nauczył się przez lata.
Dwa może być magiczną liczbą.
„Dzięki responsywnemu projektowi zawsze projektuj dwa ekrany jednocześnie: mobilny portret (320 pikseli) i komputer stacjonarny (1200 pikseli). Dzięki temu proces jest znacznie szybszy” – mówi Geletka.
Zacznij od projektu nagich kości.
„Na początku zmniejsz wszystkie funkcje, dzwonki i gwizdki. Pozbądź się śmieci i skup się na celu aplikacji” – mówi Geletka. „Oznacza to, że nie dodawaj na początku udostępniania, zapisywania i każdej integracji do swojego projektu. Upewnij się, że zrozumiałeś główny pomysł”.
Nie bój się podnieść długopisu.
„Narzędzia cyfrowe są świetne, ale czasami można zrobić więcej na papierze w 10 minut”, mówi Geletka. „Jeśli utkniesz lub masz mało czasu, użyj papieru”.
Osiągnij równowagę dzięki tej sztuczce projektowania interfejsu użytkownika aplikacji internetowej
Brandon Termini jest założycielem i dyrektorem kreatywnym Handsome (@HandsomeMade), agencji zaangażowanej w tworzenie „celowo pięknych i zachwycających” projektów interfejsu użytkownika aplikacji internetowych i produktów cyfrowych.
Użyj prawidłowej wagi optycznej.
„Równowaga jest niezwykle ważna przy tworzeniu udanych interfejsów. Dobra równowaga umożliwia użytkownikom łatwe skanowanie Twojej aplikacji zgodnie z zamierzeniami” – mówi Termini. „Widzę, że ta zasada jest łamana najczęściej podczas używania różnych ikon w interfejsach. Niektóre ikony są ważone bardziej poziomo, a inne bardziej pionowo. Naszym zadaniem jest upewnienie się, że po złożeniu są równo wyważone”.
Optyczne przyciski wagi i odtwarzania
„Jeśli projektujesz przycisk odtwarzania, odpowiedzią nie jest umieszczenie trójkąta o równych bokach w poziomie i w pionie, wyśrodkowanym wewnątrz okręgu. Jasne, geometrycznie są wyśrodkowane, ale trójkąt optycznie wydaje się cięższy po lewej stronie ze względu na większą wysokość”, mówi Termini. „Nie martw się — możesz zrobić dwie rzeczy, aby to naprawić: albo przesunąć trójkąt nieco w lewo, aby oszukać oko, aby zobaczyło go wyśrodkowany, albo nieznacznie zmniejszyć szerokość trójkąta, aby wszystkie boki wyglądały równo”.
Od projektowania interfejsu aplikacji internetowych do urządzeń mobilnych
Nasze kolejne trzy triki dotyczące projektowania interfejsu użytkownika aplikacji mobilnych i internetowych pochodzą od Christiana Dodda, wiceprezesa i dyrektora ds. strategii User Experience oraz Nathana Kocha, dyrektora ds. technologii kreatywnych w Cramer-Krasselt (@cramerkrasselt). Cramer-Kasselt jest drugą co do wielkości niezależną agencją reklamową w USA, z klientami takimi jak Porsche, Corona Extra i Heinz, więc Dodd i Koch czerpią z bogatego zasobu doświadczenia, aby udzielić nam tej rady:
Nie zapomnij o interakcjach w sieci Web podczas przenoszenia na urządzenia mobilne i miej jasny plan radzenia sobie z nimi na wczesnym etapie projektowania.
„Treść ukryta za najechaniem na komputerze może być obsługiwana na kilka sposobów na urządzeniu mobilnym: bezpośrednio na stronie i chowając się za dotknięciem. Żadne rozwiązanie do obsługi zdarzeń najechania na pulpicie nie działa we wszystkich przypadkach” – mówią Dodd i Koch. „Treści wyjaśniające/użytkowe często korzystają z unoszenia się w górę, aby pokazać się na stronie, a treści eksploracyjne często mają więcej sensu za dotknięciem. Ogólnie rzecz biorąc, ponieważ użytkownicy mogą wygodniej przewijać treści na wszystkich urządzeniach, ukrywanie treści za stanami najechania kursorem i widżetami ukrywania/pokazywania staje się coraz mniej potrzebne.
Polecany dla Ciebie:
Co oznacza przepis anty-profitowy dla indyjskich startupów?
W jaki sposób start-upy Edtech pomagają indyjskim pracownikom podnosić umiejętności i być gotowym na przyszłość...
Akcje New Age Tech w tym tygodniu: Kłopoty Zomato nadal, EaseMyTrip publikuje Stro...
Indyjskie startupy idą na skróty w pogoni za finansowaniem
Digital Marketing Platform Logicserve Bags Finansowanie INR 80 Cr, zmienia nazwę na LS Dig...
Raport ostrzega przed odnowioną kontrolą regulacyjną dotyczącą przestrzeni Lendingtech
Próba uruchomienia automatycznego odtwarzania wideo w internecie mobilnym zwykle nie jest tego warta.
„Programiści mobilnych systemów operacyjnych nie pozwalają na automatyczne odtwarzanie wideo z jakiegoś powodu. Ogólnie rzecz biorąc, dźwięk i obraz są bardziej uciążliwe dla użytkowników urządzeń mobilnych” – mówią Dodd i Koch. „Użytkownicy mobilni są przyzwyczajeni do dokonywania świadomych wyborów dotyczących korzystania z mediów”.
Projektowanie responsywne to coś więcej niż tylko zmniejszanie przeglądarki.
„Wykrywanie funkcji jest również ważną częścią tworzenia witryn mobilnych” — mówią Dodd i Koch. „Nie myśl, że nie da się odgadnąć wydarzeń w witrynie na komputery, szczegóły interakcji mobilnej są bardziej wyrafinowane, niż mogłoby się wydawać”.
W zasadzie trzech jest więcej niż myślisz
Karolyn Hart jest dyrektorem operacyjnym InspireHUB (@Inspire_HUB) i twórcą IHUBApp, jednej z pierwszych mobilnych aplikacji internetowych klasy korporacyjnej na rynku.
Staraj się trzymać wszystkie elementy projektu interfejsu użytkownika aplikacji internetowych w grupach po trzy.
„Natknęliśmy się na 'Zasadę Trzech', gdy badaliśmy, jak zapewnić naszym klientom zaufanie do naszego interfejsu. Wersja 1.0 naszej platformy nie trafiała w sedno” — mówi Hart. „Badania pokazują, że trzy to optymalna liczba, która zwiększa zaufanie. Mniej niż trzy osoby, a ludzie czują się niepewni, więcej niż trzy i czują się przytłoczeni”.
„Dlatego postawiliśmy sobie wyzwanie UX, że wszystko musi być przedstawione w trójkach”, mówi Hart, „od decyzji do kroków, gdy nasi klienci wypełniają swoje aplikacje. Reguła zmieniła nasze narzędzie. Nasz back-end jest niezwykle wyrafinowany, aby pomieścić prostotę projektu, ale opłacało się to!”
Prosta i intuicyjna obsługa gestów
Jason Suriano jest założycielem i dyrektorem generalnym Rocketfuel Productions Inc. (@TrajectoryIQ). Dzięki ponad 13-letniemu doświadczeniu w projektowaniu interfejsu użytkownika aplikacji mobilnych i internetowych oraz tworzeniu projektów internetowych i mobilnych dla firm takich jak Discovery Communications, Suriano zdobył kilka profesjonalnych wskazówek. Oto jego ulubiony:
Na telefonie komórkowym załóż, że wszystkie palce są niezdarne.
„Jednym z trików, które wdrożyliśmy podczas projektowania gier mobilnych, jest uczynienie całego ekranu startowego obszarem, który można dotknąć. Oznacza to, że jeśli użytkownik kliknie przycisk Start i nie trafi, aplikacja nadal załaduje kolejny ekran gry, zapewniając, że użytkownik będzie kontynuował korzystanie z aplikacji” – mówi Suriano.
„Ponieważ mobilny interfejs użytkownika/UX jest definiowany przez stuknięcia, podwójne stuknięcia, przesunięcia i gesty, pomyłka w projektowaniu czegoś prostego, takiego jak ekran startowy, może pozostawić użytkownika opuszczonego lub sfrustrowanego, zmuszając go do naciśnięcia przycisku głównego i wyjścia z aplikacji” – dodaje. .
Utrzymywanie otwartego umysłu na nowe sztuczki projektowania interfejsu użytkownika aplikacji internetowych
Nolan Kier i jest Project Managerem i Business Development Associate w Messapps (@Messapps), firmie zajmującej się tworzeniem aplikacji z siedzibą w Nowym Jorku. „Pomimo tego, że firma Messapps została założona niecałe trzy lata temu, szybko urosła do rangi jednej z najbardziej renomowanych i innowacyjnych firm zajmujących się tworzeniem aplikacji” — mówi Kier. triki projektowe w ciągu tych trzech krótkich lat.”
Szukaj nowych, lepszych sposobów wykonywania pracy.
„Wiele sztuczek lub nowych metod wykonywania zadania, których nauczyliśmy się, badając problem lub zagłębiając się w konkretny problem rozwojowy, aby ustalić, jakie odpowiedzi można wydobyć” – mówi Kier. „Przykłady tego obejmują naukę pisania fajnych dokumentów poprzez pisanie nowych fragmentów kodu w LaTeX, co jest czymś w rodzaju edytora tekstu ze stylem/formatem programowania. Ponadto Mathematica, która jest podobna do Mathcad dla MacOS, miała tę schludną ukrytą funkcję, która pozwalała użytkownikowi stworzyć trudny schemat 3D za pomocą oprogramowania”.
„Jeśli chodzi o projektowanie, natknięcie się na kompresję klatek za pomocą takich rzeczy, jak modyfikowanie kanałów alfa i możliwość kompresowania poszczególnych obrazów za pomocą niestandardowych algorytmów, były małymi sztuczkami, które pomogły w tym procesie” – mówi Kierk. „Bycie w branży projektowania i rozwoju interfejsu użytkownika aplikacji internetowych wymaga innowacji, które pasują do ewolucji technologii. W rezultacie nasi projektanci i programiści nieustannie przerabiają nasze wewnętrzne i zewnętrzne procesy, aby „wynaleźć koło na nowo” i odkryć nowe sposoby projektowania i rozwoju”.
Znalezienie odpowiednich osób do współpracy
Robert Pieta jest inżynierem iOS i CEO w Porter Key (@PorterKeyboard), inteligentnej klawiaturze iOS, która zapewnia kontekstowe sugestie. Oto jego największa rada jako inżyniera i przedsiębiorcy:
Znajdź projektanta programisty lub programistę projektanta.
„Ktoś, kto rozumie i ma doświadczenie z obu stron, pomoże rozwiązać problemy z komunikacją i pomoże utrzymać projekt zgodnie z harmonogramem”, mówi Pieta. „Są z tego dwie główne korzyści. Po pierwsze, osoba z doświadczeniem w projektowaniu i rozwoju może pomóc w wypełnieniu luk komunikacyjnych. Zarówno projektowanie, jak i rozwój mają swoje własne kluczowe terminy, slang, dorozumiane założenia i głównych najemców. Znając oba światy, problemy z komunikacją można wyłapać zapobiegawczo”.
„Po drugie, programista z doświadczeniem w projektowaniu może znacznie lepiej oszacować złożoność i wymagania dotyczące zasobów niż pojedynczy programista, pojedynczy projektant, czy nawet menedżer produktu” – dodaje Pieta. „Często małe zmiany w projekcie mogą prowadzić do znacznego skrócenia czasu opracowywania. Dotyczy to zwłaszcza urządzeń mobilnych, gdzie pewne paradygmaty projektowe są praktycznie gotowe. Zrozumienie, jakie dostosowania są łatwe do wdrożenia, a jakie animacje są proste w użyciu, pomoże zarówno programistom, jak i projektantom cieszyć się tym procesem”.
„Niektóre istniejące zespoły mogą twierdzić, że spotkania na stojąco z programistami i projektantami rozwiązują te problemy”, mówi Pieta, „ale często tak nie jest. Spotkanie jest zbyt krótkie, aby dokładnie zagłębić się w ukryte założenia projektowe, poprzednie badania użytkowników, istniejące decyzje dotyczące architektury kodu, wybór języka i inne wybory definiujące projekt. Tylko osoba z doświadczeniem z obu światów będzie w stanie szybko i skutecznie wypełnić tę lukę.”
I jeszcze jedna sztuczka od nas: użyj odpowiedniego narzędzia do prototypowania
Niektórych sztuczek związanych z projektowaniem interfejsu użytkownika aplikacji mobilnych i internetowych można nauczyć się, a niektórych można się nauczyć tylko na własnej skórze, poprzez doświadczenie. Na szczęście dzisiejsi projektanci i programiści mogą budować swoją wiedzę, jak to mówią, na barkach gigantów.
[ Proto .io to narzędzie do prototypowania aplikacji mobilnych używane przez przedsiębiorców i startupy do tworzenia w pełni interaktywnych realistycznych prototypów, które wyglądają i działają jak prawdziwe aplikacje.]