UX i HTML5: pomóżmy użytkownikom wypełnić formularz mobilny (część 2)

W tej drugiej części chcę bardziej skupić się na możliwościach specyficznych dla urządzeń mobilnych. Na przykład HTML5 przyniósł nam wiele naprawdę fajnych funkcji, które pomagają użytkownikom wypełniać formularze mobilne i formatować ich dane. Zobaczymy szczegółowo, jak atrybuty HTML5 mogą Ci w tym pomóc. Następnie wyjdziemy poza „klasyczne” elementy formularzy i zobaczymy, jak wykorzystać możliwości mobilne, takie jak aparat, geolokalizacja i skanery linii papilarnych, aby naprawdę przenieść korzystanie z formularzy mobilnych na wyższy poziom na stronach internetowych i w natywnych aplikacjach.

Pomaganie użytkownikowi w formatowaniu treści za pomocą HTML5

W pierwszej części tej serii widzieliśmy kilka ogólnych porad dotyczących wyświetlania pól. Teraz nadszedł czas, aby zajrzeć nieco głębiej i przyjrzeć się, jak kilka dobrze przygotowanych wierszy kodu HTML5 może ulepszyć formularze mobilne.

Korzyści HTML5 zoptymalizowane pod kątem urządzeń mobilnych

HTML5 otwiera cały świat możliwości optymalizacji formularzy dla urządzeń mobilnych i dotykowych. Wiele interesujących nowych typów wprowadzania może wyzwalać różne klawiatury, aby pomóc użytkownikom. Możemy też zrobić kilka ciekawych rzeczy z przechwytywaniem multimediów bezpośrednio w przeglądarce.

Wprowadzanie danych liczbowych

input type= number

Atrybut HTML5 <input type=number> ogranicza pole wejściowe do liczb. Ma wbudowany system walidacji, który odrzuca wszystko, co nie jest liczbą.

W niektórych przeglądarkach na komputery te dane wejściowe są przedstawiane za pomocą małych strzałek po prawej stronie, które użytkownik może kliknąć, aby zwiększyć liczbę. Na urządzeniach mobilnych otwiera klawiaturę z cyframi , co zmniejsza liczbę literówek i błędów sprawdzania poprawności formularzy. Wygląd i sposób działania danych wejściowych zależą od systemu operacyjnego.

Dane wejściowe powinny uwzględniać ułamki dziesiętne i liczby ujemne (ale niewiele klawiatur to uwzględnia). Jak wyjaśniono w specyfikacjach W3C, „prostym sposobem określenia, czy użyć typ=liczba, jest rozważenie, czy kontrolka wejściowa miałaby sens, aby miała interfejs pokrętła (np. ze strzałkami „w górę” i „w dół”)”. Oznacza to, że wejście nie powinno być używane dla kart kredytowych lub numerów kierunkowych.

pattern i atrybuty inputmode

Aby dodać pewne ograniczenia do wprowadzania liczb, możesz użyć atrybutu pattern aby określić wyrażenie regularne, względem którego chcesz kontrolować wartości.

Tak to wygląda:

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

Możesz użyć tego wzoru, aby wyświetlić klawiaturę numeryczną z dużymi przyciskami na iPhonie (ale nie na iPadzie). Ta klawiatura nie ma znaku minus ani przecinka, więc użytkownicy tracą możliwość używania liczb ujemnych i dziesiętnych. Nie mogą też przełączyć się z powrotem na inną klawiaturę, więc zachowaj ostrożność podczas korzystania z tego.

Należy również zauważyć, że wzorce można zastosować do dowolnego innego typu danych wejściowych.

Używanie tylko tego wzoru nie działa na większości telefonów z Androidem. Nadal będziesz potrzebować kombinacji input type=number i atrybut, aby to zadziałało.

inputmode

Jeśli chcesz tylko uruchomić klawiaturę numeryczną telefonu komórkowego, ale nie chcesz zajmować się bałaganem type=number i pattern , możesz użyć wprowadzania tekstu i zastosować atrybut inputmode=numeric. Wyglądałoby to tak:

 <input type="text" name="quantity" inputmode="numeric" />

Niestety (w momencie pisania tego tekstu) obsługuje to tylko mobilny Chrome 67, ale powinien pojawić się na pulpicie Chrome 66 bez flagi.

Aby dowiedzieć się więcej o tym, jak wprowadzać liczby w formularzu, przeczytaj „Chciałem wpisać liczbę”.

input type=tel

Jeśli chcesz, aby użytkownicy wprowadzili numer telefonu, możesz użyć typu input=tel. Jak widać na poniższym zrzucie ekranu, uruchamia on te same cyfry na klawiaturze systemu iOS, co atrybut wzorca opisany powyżej. Ze względu na złożoność numerów telefonów na całym świecie nie ma automatycznej walidacji w przypadku tego typu danych wejściowych.

Wprowadzanie dat

Nawet jeśli są to technicznie dane liczbowe, daty zasługują na osobny rozdział. Istnieje kilka typów danych wejściowych HTML5 do wprowadzania dat. Najczęściej używany jest input type=date . W obsługiwanych przeglądarkach uruchomi selektor dat. Wygląd selektora daty zależy od przeglądarki i systemu operacyjnego. Aby dowiedzieć się więcej o tym, jak przeglądarki renderują input type="date" , polecam lekturę „Skomplikowanie input type=date ”.

Jest też type=week , aby wybrać tydzień, type=time , aby wprowadzić czas (do godziny i minuty) i type=datetime-local , aby wybrać datę i godzinę (używając czasu lokalnego użytkownika). Tyle wyborów!

input type=date działa dobrze na przykład w interfejsach rezerwacji. Możesz mieć jednak pewne potrzeby, które wymagają zbudowania własnego selektora dat (jak już widzieliśmy w sekcji o rozsądnych ustawieniach domyślnych). Ale input type=date jest zawsze dobrą opcją, jeśli potrzebujesz selektora dat i nie chcesz wprowadzać do witryny całej biblioteki JavaScript do pracy.

Jednak czasami lepiej nie używać type=date dla dat. Weźmy za przykład datę urodzenia. Gdybym urodził się w 1960 roku (nie jestem — to tylko przykład), zajęłoby mi wiele stuknięć, aby wybrać datę urodzenia, gdybym zaczynał od 2018 roku. Na Androidzie odkryłem niedawno, że jeśli nacisnę rok w selektorze dostaję coś w rodzaju rozwijanego koła ze wszystkimi latami. Nieco lepiej, ale nadal wymaga sporo przewijania.

Użytkownik powiedział mi na Twitterze:

"Urodziłem się w 1977 roku i mogę potwierdzić irytację. Im więcej czasu zajmuje przewijanie, tym czujesz się starszy :-("

Może więc daty urodzenia nie są najlepszym kandydatem na randki.

URL, e-mail, telefon i wyszukiwanie

Telefony komórkowe ukrywają inne funkcje klawiatury i optymalizacji wprowadzania, które poprawiają wrażenia użytkownika podczas wypełniania formularza. Diabeł tkwi w szczegółach, jak to mówią.

Użycie pola input type=url spowoduje wyświetlenie zoptymalizowanej klawiatury na urządzeniu mobilnym z / (klawisz ukośnika) bezpośrednio dostępnym. W zależności od systemu operacyjnego możesz również zapewnić szybki dostęp do wspólnych domen najwyższego poziomu, takich jak .fr na zrzucie ekranu poniżej. Jeśli długo naciśniesz ten przycisk, pojawią się skróty do innych domen najwyższego poziomu. Obejmuje to również automatyczną walidację przeglądarki, która sprawdza, czy format adresu URL jest prawidłowy.

Pole input type=email powoduje wyświetlenie klawiatury zoptymalizowanej pod kątem poczty e-mail, zapewniającej szybki dostęp do symbolu @ . To wejście wymaga obecności @ gdzieś w polu, aby było prawidłowe. To jedyna weryfikacja, jaką robi.

Pole input type=search wyświetla klawiaturę zoptymalizowaną pod kątem wyszukiwania. Użytkownik może bezpośrednio uruchomić wyszukiwanie za pomocą przycisku na klawiaturze. Jest też mały krzyżyk, aby wyczyścić pole i wpisać nowe zapytanie.

Zakres i kolor

Ostatnie dwa typy danych wejściowych, które przyjrzeliśmy się, nie są specjalnie zoptymalizowane pod kątem urządzeń mobilnych, ale używając ich, możemy uniknąć konieczności ładowania ciężkich niestandardowych bibliotek JavaScript, co jest dobrym pomysłem dla użytkowników mobilnych.

input type=range zapewnia wizualny suwak interfejsu użytkownika do wprowadzania liczby. Interfejs użytkownika dla tej kontrolki jest zależny od przeglądarki.

input type=color umożliwia użytkownikowi łatwe wprowadzenie wartości koloru. W wielu implementacjach przeglądarek jest to wyposażone w selektor kolorów.

Przechwytywanie multimediów HTML: robienie i przesyłanie zdjęć oraz nagrywanie dźwięku

Pamiętam czasy iPhone'a 3, kiedy Apple nie pozwoliło nawet na użycie prostego input type=file na stronie internetowej, ze względów bezpieczeństwa. Te czasy już dawno minęły. Dzięki interfejsowi API przechwytywania multimediów HTML można teraz uzyskać dostęp do różnych czujników urządzenia. Możemy robić zdjęcia i filmy, a nawet nagrywać głos bezpośrednio w przeglądarce.

Atrybut accept pozwala określić, jakie media mają być akceptowane na wejściu: audio, obraz, wideo. Użytkownik może na przykład dać przeglądarce bezpośredni dostęp do swojej kamery.

Kod wygląda tak:

 <input type="file" accept="image/*">

Atrybut przechwytywania pozwala określić preferowany tryb przechwytywania. Jeśli dodasz atrybut capture nad atrybutem accept , możesz sprawić, by przeglądarka bezpośrednio otwierała aparat lub dyktafon.

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

Aby uzyskać więcej informacji na temat korzystania z multimediów bezpośrednio w przeglądarce, przeczytaj sekcję „Dostęp i obsługa obrazów, wideo i audio bezpośrednio w przeglądarce” w moim artykule na temat tajnych możliwości przeglądarek mobilnych.

HTML5 Autos: autokorekta, autouzupełnianie, autouzupełnianie, autocapitalize i autofokus

HTML5 zawiera mnóstwo automatycznych atrybutów. Aby zwiększyć wygodę korzystania z urządzeń mobilnych, będziesz chciał wiedzieć, co można zautomatyzować, a co nie. Oto kilka ogólnych zasad:

• Wyłącz autokorektę na rzeczach, dla których słownik jest słaby : adresy e-mail, numery, nazwiska, adresy, miasta, regiony, numery kierunkowe, numery kart kredytowych.
• Wyłącz automatyczne pisanie wielkimi literami w polach e-mail i innych polach tam, gdzie to konieczne (na przykład adresy URL witryn). Zauważ, że type=email wykonuje zadanie za Ciebie w najnowszych wersjach iOS i Androida, ale i tak wyłącz je dla starszych wersji lub jeśli type=email nie jest obsługiwane.
• Możesz ustawić atrybut autocapitalize na words , aby automatycznie wielka pierwsza litera każdego słowa wpisywanego przez użytkownika. Może to być przydatne w przypadku nazw, miejsc i tym podobnych, ale znowu bądź ostrożny i przetestuj go.

• Dla input type=tel ustaw autocomplete="tel" .
• Możesz użyć autofocus , aby ustawić fokus na element sterujący, gdy użytkownik ładuje stronę. Ale tylko dlatego, że użytkownik otwiera stronę „kontakt”, nie oznacza to, że jest gotowy, aby przejść od razu do pierwszego pola formularza. Więc znowu używaj go mądrze.

Jeśli chcesz więcej opcji autouzupełniania, cała lista znajduje się na Wiki WhatWG. Tylko upewnij się, że używasz właściwych. Zaimplementuj, przetestuj i przetestuj ponownie.

Walidacja formularzy HTML5

Nie będę tutaj wchodził w szczegóły techniczne, ale powinieneś wiedzieć, że HTML5 ma wbudowany interfejs API do sprawdzania poprawności formularzy dla wielu pól. Fajnie, jeśli nie chcesz używać biblioteki JavaScript do wyświetlania wbudowanych komunikatów walidacji. Oto główne rzeczy, które musisz wiedzieć jako projektant UX na temat walidacji formularzy HTML5:

• Komunikat weryfikacyjny jest kontrolką przeglądarki. Nie możesz go ostylować w CSS i jest inny dla każdej przeglądarki.
• Możesz zmienić tekst wiadomości w JavaScript za pomocą setCustomValidity .
• CSS3 zapewnia :invalid, :valid i :required oraz inne pseudoklasy do walidacji formularzy HTML. Są one uruchamiane po rozmyciu, więc na razie są prawie bezużyteczne.

W „Native Form Validation, Part 1” Peter-Paul Koch szczegółowo wyjaśnia, dlaczego walidacja formularzy HTML i CSS tak naprawdę nie poprawia obecnie formularzy.

Wsparcie offline, aby zapisać dane użytkownika

Wiele rzeczy może pójść nie tak, zwłaszcza na urządzeniach mobilnych. Błędy się zdarzają. Użytkownik może pomylić przycisk Wstecz w przeglądarce i stracić wszystkie swoje dane.

Jeśli użytkownik wróci na stronę, dobrze byłoby ponownie wyświetlić jego dane . To samo dotyczy awarii przeglądarki lub zamknięcia karty przez użytkownika. Możesz przechowywać dane użytkownika w pamięci lokalnej lub sesyjnej, aby upewnić się, że nic nie zostanie utracone, jeśli coś pójdzie nie tak. Geoffrey Crofte napisał bibliotekę JavaScript, która może ci w tym pomóc.

Jeśli połączenie zostanie utracone, gdy użytkownik przesyła formularz, może również utracić dane. Aby tego uniknąć, możesz użyć kombinacji** interfejsu API HTML5 offline** i interfejsu Service Workers API , aby:

• przechowywać dane w pamięci podręcznej,
• spróbuj automatycznie wysłać go ponownie, gdy połączenie zostanie przywrócone.

Aby dowiedzieć się, jak to zakodować, zapoznaj się z artykułem „Formularze przyjazne offline”.

Możliwości urządzeń mobilnych mogą przenieść doświadczenie na wyższy poziom

W części 1 trzymaliśmy się podstawowych wspólnych elementów formularzy HTML i atrybutów w celu ulepszenia formularzy mobilnych. Jednak możliwości urządzeń mobilnych wykraczają teraz daleko poza wyświetlanie stron internetowych HTML, CSS i JavaScript. Te małe urządzenia są wyposażone w wiele czujników . I będziemy mogli korzystać z wielu z nich w natywnych aplikacjach i w sieci , aby znacznie ułatwić życie naszym użytkownikom.

Wykrywanie lokalizacji użytkownika

W poprzednim rozdziale pisałem o wstępnym uzupełnianiu informacji o miejscach i adresach. To dobry początek. Możemy pójść o krok dalej. Zamiast prosić użytkowników o wpisanie lokalizacji, możemy ją wykryć . Poznaj interfejs API geolokalizacji w sieci. Istnieją również natywne API geolokalizacji iOS, Android i Windows Phone.

Citymapper to strona internetowa i aplikacja, która pomaga użytkownikom planować podróże. Gdy użytkownik przejdzie do pierwszego pola, zobaczy opcję „Użyj bieżącej lokalizacji”. Jeśli ją wybiorą, zostaną poproszeni o zezwolenie przeglądarce na dostęp do ich danych geolokalizacyjnych. To jest API geolokalizacji. Przeglądarka następnie automatycznie uzupełnia znalezioną lokalizację, a użytkownik może przejść do pola docelowego. Natywna aplikacja działa w podobny sposób.

Bądź mądry, prosząc o zgodę użytkownika

Być może zauważyłeś w poprzednim filmie, że musiałem wyrazić zgodę na udostępnienie mojego stanowiska na stronie Citymapper. W przeglądarce użytkownik obsługuje uprawnienia strona po stronie, API po API.

Musisz także uważać, kiedy prosisz o pozwolenie . Użytkownik może odmówić dostępu do geolokalizacji, powiadomienia lub innego API, jeśli o to poprosisz zbyt wcześnie. Mogą również odmówić, jeśli nie rozumieją, dlaczego potrzebujesz pozwolenia. Masz jedną szansę; używaj go mądrze . Po tym prawie niemożliwe będzie odzyskanie. Jestem zaawansowanym użytkownikiem Androida i nawet ja muszę szukać opcji w przeglądarce, gdy chcę zresetować uprawnienia, które nadałem witrynie. Wyobraź sobie, jakie kłopoty będą mieć Twoi użytkownicy.

Oto kilka ogólnych porad dotyczących proszenia o uprawnienia w sieci:

• Nie bądź przerażającym geolokalizacją ani prześladowcą powiadomień: nie pytaj o pozwolenie, gdy tylko użytkownik pojawi się w Twojej witrynie . Mogą jeszcze nie wiedzieć o Tobie lub Twojej usłudze.
• Pozwól użytkownikowi odkryć Twoją witrynę i usługę. Następnie poproś o pozwolenie w kontekście . Jeśli chcesz uzyskać dostęp do ich lokalizacji, zapytaj ich tylko wtedy, gdy tego potrzebujesz (dobrym przykładem jest Citymapper).
• Wyjaśnij , dlaczego potrzebujesz pozwolenia i co z nim zrobisz .

Jeśli chcesz iść dalej, Łukasz Wróblewski (tak, znowu on) stworzył fajny film, który pomoże ci w procesie proszenia o pozwolenie.

Lepsze wrażenia z realizacji transakcji

Dużym obszarem ulepszeń dla formularzy jest cały proces płatności przy kasie. Tutaj znowu czujniki na urządzeniu mogą sprawić, że będzie to prawie bezbolesne doświadczenie. Jedynym problemem będzie ilość pieniędzy wydanych przez użytkownika.

Skaner kart kredytowych iOS

W poprzednim rozdziale pisałem o autodetekcji kart kredytowych i funkcjach autouzupełniania na podstawie wcześniejszych danych wprowadzonych przez użytkownika. To nadal oznacza, że ​​użytkownik musi przynajmniej raz wpisać dane swojej karty kredytowej.

Firma Apple przeniosła to na wyższy poziom dzięki skanerowi kart kredytowych . Od wersji iOS 8 w przeglądarce Safari użytkownicy mogą używać aparatu do skanowania i autouzupełniania informacji o karcie kredytowej. Aby wykonać tę magię, będziesz musiał dodać atrybut autouzupełniania cc-number i nazwę, aby zidentyfikować to jako pole karty kredytowej. Apple nie ma na ten temat zbyt wielu oficjalnych informacji, ale niektórzy przeprowadzili testy i umieścili wyniki na StackOverflow.

Safari ma również opcje autouzupełniania, których użytkownicy mogą użyć, aby dodać swoją kartę kredytową, co pozwala im ponownie używać jej w wielu witrynach.

Zrób zakupy o krok dalej dzięki Google Pay API

Google uruchomił coś podobnego: Google Pay API. Po wdrożeniu na stronie internetowej interfejs API eliminuje konieczność ręcznego wprowadzania informacji o płatności . Idzie o krok dalej: może również przechowywać adresy rozliczeniowe i wysyłkowe.

Użytkownik otrzymuje w Chrome okno dialogowe, w którym wyświetlane są różne zapisane przez niego informacje o płatnościach. Mogą wybrać, którego z nich użyć, i zapłacić bezpośrednio w oknie dialogowym .

Standaryzowana wersja Payment Request API jest obecnie rekomendacją kandydata W3C. Jeśli zostanie to zaimplementowane w przeglądarkach, użytkownicy będą mogli płacić za pomocą jednego przycisku, który zażąda interfejsu API. Każdy następny krok byłby obsługiwany przez natywne okna dialogowe przeglądarki.

Łatwiejsze uwierzytelnianie

Telefony komórkowe to w większości przypadków urządzenia osobiste, których ludzie zwykle nie udostępniają innym. Otwiera to kilka interesujących możliwości uwierzytelniania.

Magiczne łącze

Używam menedżera haseł. Nie znam 99% moich haseł. Wszystkie są generowane losowo. Aby zalogować się do nowego obszaru roboczego Slack, muszę:

1. otwórz mojego menedżera haseł,
2. wprowadź moje hasło główne,
3. wyszukaj miejsce do pracy,
4. skopiuj i wklej hasło do aplikacji Slack.

To żmudny proces, ale Slack był wystarczająco sprytny, aby zapewnić lepszą opcję.

Wielu użytkowników ma zsynchronizowaną pocztę na swoim telefonie. Slack to rozumiał. Gdy dodasz w aplikacji nowy obszar roboczy Slack, możesz zalogować się za pomocą hasła lub poprosić o opcję „magiczne łącze”. Jeśli zdecydujesz się na to drugie, Slack wyśle ​​magiczne łącze do Twojej skrzynki pocztowej . Otwórz pocztę, kliknij duży zielony przycisk i — ta-da! — jesteś zalogowany.

Za kulisami to magiczne łącze zawiera token uwierzytelniający. Aplikacja Slack przechwytuje to i uwierzytelnia Cię bez konieczności podawania hasła.

Odcisk palca do inteligentnej identyfikacji

Prawie całą swoją bankowość wykonuję na moim urządzeniu mobilnym. A jeśli chodzi o logowanie na moje konta bankowe, istnieje ogromna różnica między moją francuską aplikacją bankową Societe General a niemiecką aplikacją N26.

W Societe Generale mam ciąg logowania i hasło. Mogę poprosić aplikację o zapamiętanie ciągu logowania, który składa się z 10 losowych cyfr. Nie pamiętam tego; Używam do tego menedżera haseł. Muszę jeszcze pamiętać i wprowadzić sześciocyfrowe hasło na własnej klawiaturze. Oczywiście pozycje liczb zmieniają się za każdym razem, gdy się loguję. Bezpieczeństwo — tak, wiem. Ponadto muszę zmieniać to hasło co trzy miesiące. Ostatnim razem, gdy byłem zmuszony zmienić hasło, zrobiłem to, co robi większość ludzi: wybrałem prawie to samo hasło, ponieważ nie chcę pamiętać kolejnej sześciocyfrowej liczby. I oczywiście byłem cholernie pewien, że go zapamiętam, więc nie wpisałem go w moim menedżerze haseł. Błąd nowicjusza. Dwa tygodnie później próbowałem się zalogować. Oczywiście zapomniałem. Wykonałem trzy nieudane próby, po czym moje konto zostało zablokowane. Na szczęście używam tego konta tylko do oszczędności. W aplikacji możesz poprosić o nowe hasło. Bank potrzebował prawie tygodnia, aby wysłać mi nowe sześciocyfrowe hasło pocztą na mój adres domowy w Luksemburgu. Tak.

Z drugiej strony N26 używa mojego adresu e-mail jako ciągu logowania. Pamiętam to bez menedżera haseł. Kiedy chcę się zalogować, kładę palec na przycisku startu mojego telefonu Xperia i to wszystko. W tle mój telefon skanuje mój odcisk palca i uwierzytelnia mnie. Jeśli to nie zadziała, mogę wrócić do hasła.

To samo urządzenie, dwie aplikacje, dwa zupełnie różne doświadczenia.

Coraz więcej aplikacji na Androida i iOS oferuje teraz użytkownikom możliwość uwierzytelniania za pomocą odcisku palca . Koniec z hasłami — to ciekawe i eleganckie rozwiązanie.

Oczywiście ludzie wyrażali pewne obawy dotyczące bezpieczeństwa. Dla Narodowego Instytutu Standardów i Technologii (NIST) biometria nie jest uważana za wystarczająco bezpieczną. Zaleca połączenie biometrii z drugim czynnikiem uwierzytelniania.

Czujniki linii papilarnych też można oszukać — tak, jak w filmach szpiegowskich. Czy słyszałeś o samolocie, który został zmuszony do lądowania, ponieważ kobieta dowiedziała się o niewierności męża po tym, jak kciukiem odblokował telefon, gdy spał?

Rozpoznawanie twarzy i identyfikator twarzy

W 2018 roku Apple wypuścił iPhone'a X z zupełnie nowym identyfikatorem twarzy. Użytkownicy mogą odblokowywać iPhone’a X za pomocą twarzy . Oczywiście niektóre inne telefony z Androidem oraz tablety i komputery z systemem Windows proponowały tę funkcję wcześniej. Ale kiedy Apple wprowadza coś na rynek, zwykle staje się to „rzeczą”. Na chwilę obecną ta technologia jest używana głównie jako uwierzytelnianie do odblokowywania telefonów i komputerów.

Technologia rozpoznawania twarzy wiąże się z dużymi wyzwaniami. Po pierwsze, niektóre algorytmy mogą zostać oszukane przez zdjęcie osoby, które można łatwo zhakować. Kolejnym większym problemem jest różnorodność. Algorytmy rozpoznawania twarzy mają zwykle trudności z rozpoznawaniem osób kolorowych. Na przykład czarnoskóra badaczka musiała nosić białą maskę, aby przetestować swój własny projekt. Badaczem jest Joy Buolamwini i wygłosiła wykład na TED na ten temat.

Niektóre służby celne używają również niektórych programów do rozpoznawania twarzy w celu przyspieszenia przetwarzania granic. Jest używany w Nowej Zelandii i będzie używany w Kanadzie.

Większość z nas widziała wystarczająco dużo science fiction, aby zobaczyć potencjalne problemy i konsekwencje systemów wykorzystujących rozpoznawanie twarzy na dużą skalę. Tego rodzaju technologia stosowana poza prywatną przestrzenią odblokowywania telefonów może być kontrowersyjna i przerażająca.

Google: rejestracja jednym dotknięciem

Jeśli użytkownik ma konto Google, może skorzystać z rejestracji jednym dotknięciem Google. Podczas odwiedzania strony internetowej i monitowania o utworzenie konta w wbudowanym oknie dialogowym użytkownik nie musi wprowadzać hasła. Google zapewnia bezpieczne konto bez hasła oparte na tokenie, połączone z kontem Google użytkownika. Gdy użytkownik wraca, jest automatycznie logowany. Jeśli przechowuje swoje hasła w Smart Lock, automatycznie loguje się również na innych urządzeniach.

Uwaga : jest to interesujące rozwiązanie bez hasła. Oczywiście dzięki niej użytkownicy są powiązani z Google, z czym nie każdy będzie się czuł komfortowo .

Wniosek

Gdy zaczniesz korzystać z funkcji mobilnych, aby pomóc użytkownikom wypełniać formularze, możesz zrobić wiele naprawdę fajnych rzeczy. Podczas tworzenia formularzy potrzebujemy nastawienia na mobilność ; w przeciwnym razie utkniemy na znanych nam możliwościach komputerów stacjonarnych.

Ponownie, uważaj na możliwości urządzenia: zawsze miej rozwiązanie awaryjne na wypadek awarii czujnika lub odmowy dostępu przez użytkownika. Unikaj czynienia tych możliwości jedynymi opcjami dla tych funkcji (chyba że tworzysz aplikację mapową, która opiera się na geolokalizacji).

To koniec serii dwóch naprawdę długich artykułów, w których przedstawiłem ogólne porady dotyczące UX i użyteczności oraz najlepsze praktyki. W końcu liczy się Twój formularz i Twoi użytkownicy . Niektóre opisane tutaj rzeczy mogą nawet nie działać specjalnie dla Twoich użytkowników — kto wie? Więc cokolwiek zrobisz, nie wierz mi (lub Łukaszowi) na słowo. Przetestuj go z prawdziwymi użytkownikami na prawdziwych urządzeniach. Zmierz to. I przetestuj ponownie. Przeprowadź badania użytkowników i testy użyteczności . Doświadczenie użytkownika to nie tylko najlepsze praktyki i magiczne przepisy, które kopiujesz i wklejasz. Musisz dostosować przepis, aby działał dla Ciebie.

Krótko mówiąc: Przetestuj to. Przetestuj go na prawdziwych urządzeniach. Przetestuj to z prawdziwymi użytkownikami.