 Format Pobłażliwy  Format Strukturalny  Uzupełnianie  Wskazówki  Zapytania  Miernik Bezpieczeństwa Hasła  Automatyczne Uzupełnianie  Rozwijany Selektor  Kreator Listy  Poprawne wartości domyślne  Zlokalizowane komunikaty o błędach

FORMAT POBŁAŻLIWY

Co zyskuje użytkownik? Możliwość wpisywania danych o różnym formacie i składni. Co daje od siebie aplikacja? Inteligentną obróbkę danych wprowadzonych przez użytkownika.

Kiedy używać Formatu Pobłażliwego???

ABY ZACHOWAĆ PROSTOTĘ INTERFEJSU POZOSTAWIĆ DLA UŻYTKOWNIKA DOWOLNOŚĆ WPROWADZANYCH DANYCH PRZYSPIESZYĆ SAMO WPROWADZANIE DANYCH

UWAGA BĘDZIE PRZYKŁAD!

Tutaj też zastosowano Format Pobłażliwy

Jest jednak haczyk!

Rozwiązanie to niesie ze sobą pewne problemy PROGRAMISTYCZNE 

Wszystko zależy od tego jaki poziom dowolności pozostawiasz użytkownikowi… Im więcej mu pozwalasz, tym więcej przypadków musisz przewidzieć…

FORMAT STRUKTURALNY

Po uzupełnieniu niektórych pól – wyczerpaniu liczby określonego miejsca na dane, użytkownik przenoszony jest automatycznie do kolejnego pola z danymi(pola podświetlone na niebiesko)

Obowiązkowo zatwierdzamy dane!

Znaki szczególne FORMATU STRUKTÓRALNY UŻYWANY JEST W SYTUACJACH: Kiedy interesuje nas konkretny rodzaj danych wejściowych Kiedy Format jest znajomy i dobrze określony tzn. kiedy nie widzisz powodu/ów dlaczego miało by być tak a nie inaczej FORMATU STRUKTÓRALNEGO NIEUŻYWANY JEST W SYTUACJACH: Kiedy mamy do czynienia z danymi, dla których użytkownik może mieć swój ulubiony format Kiedy do aplikacji ma dostęp szeroka grupa użytkowników z różnych krajów. Format danych charakterystyczny dla danego regionu. DLACZEGO UŻYWAĆ?  Aby „wymusić” na użytkowniku konkretny rodzaj pozyskiwanych danych  Postawić jasne oczekiwania, „w tym polu będzie imię”, „w tym polu będzie klucz rejestracyjny”  Aby zredukować ilość błędów przy wprowadzaniu danych przez użytkownika (duża ilość „krótkich pól” na konkretne dane)

Przykład FORMATU DATY – w różnych krajach Jako przykład dlaczego nie należy narzucać z góry użytkownikowi jednolitego poglądu na interfejs – należy uwzględnić wiele przypadków.

UZUPEŁNIANIE

Tak wygląda:

Korzyści: Interfejs staje się bardziej zrozumiały Użytkownik widzi co się dzieje i czego się od niego wymaga Kiedy używać? Kiedy typowy styl oznaczeń nie wystarcza – w niewystarczającym stopniu wskazuje użytkownikowi o co chodzi.

PAMIĘTAJ! Poprawna lokalizacja interfejsu staje się niezwykle trudna,ponieważ zrozumienie go oparte jest na kolejności wyrazów. Aby interfejs funkcjonował poprawnie w innych językach konieczna może być zmiana jego układu.

WSKAZÓWKI

Czym są wskazówki? Poniżej lub obok pola tekstowego są przykładem objaśniającym czego wymaga się od użytkownika.

A tak wyglądają:

Kiedy i jak używać? Wskazówek należy używać wtedy, kiedy chcemy poinformować użytkownika jakiego rodzaju danych od niego konkretnie oczekujemy. Nie należy przesadzać z ilością tekstu, gdyż może to zniechęcić użytkownika Wzorzec często łączony z formatem pobłażliwym

ZAPYTANIA

Jak wygląda zapytanie?

Do czego służy? Podpowiada użytkownikowi co konkretnie ma wpisać. Osoba przeglądająca pospiesznie interfejs może łatwo zignorować wskazówkę, zatem nie przesłania ona to faktycznego interfejsu i pełni rolę drugoplanową Do kontrolki zostaje przypisana jednoznacznie odpowiednia funkcjonalność, toteż użytkownik nie musi się zastanawiać do czego służy i czy koniecznie jej musi użyć.

Pamiętaj! Aby mimo wszystko nie opuszczać zewnętrznych tytułów pól formularza do wypełnienia, gdyż możesz podczas wpisywania zapomnieć jakie informacje w danym polu były wymagane

MIERNIK BEZPIECZEŃSTWA HASŁA

Zanim o wzorcu to zastanówmy się

Czym jest bezpieczne hasło??? A raczej jak wygląda

Jak stworzyć silne hasło? Wybierz zdanie, które łatwo zapamiętasz, np. Bardzo lubię czerwone smażone pomidory. Będzie to podstawa do zbudowania silnego hasła. Utwórz nowe, pozbawione znaczenia słowo z dwóch pierwszych liter każdego wyrazu ze zdania powyżej: baluczsmpo. Zwiększ siłę hasła dodając wielkie i małe litery oraz cyfry, np. BaLuczsmP0. Zastąp część liter i cyfr znakami specjalnymi, np. Powyższy przykład jest tylko jedną z metod, jakie można wykorzystać do stworzenia silnego hasła. Źródło:

Cechy silnego hasła ma co najmniej 10 znaków, zawiera kombinację cyfr, wielkich i małych liter oraz symboli (np. jest dla Ciebie łatwe do zapamiętania, lecz trudne do odgadnięcia przez inne osoby, nie zawiera wyrazów z logicznymi zamiennikami liter, np. nie zawiera całego wyrazu słownikowego, różni się znacznie od poprzednich haseł, nie zawiera powtórzeń znaków (np ), sekwencji (np. abcdefgh), ani ciągów znaków występujących obok siebie na klawiaturze (np. QWERTY). Źródło:

Do rzeczy, czyli jak wygląda sam wzorzec???

Informacje naprowadzające użytkownika na właściwy wybór hasła. Dodatkowe wskazówki.

Automatyczne uzupełnianie

Tak wygląda:

Jak to jest zrobione???

Po pierwsze pole tekstowe… Musisz przewidzieć co użytkownik może wpisać w polu tekstowym i wyświetlić mu listę potencjalnych odpowiedzi o ile jest to stosowne Być może istnieje historia tego co użytkownik już wpisał albo wybiera on z zestawu gotowych wartości

Korzyści Zmniejszenie zagrożenia pojawienia się błędów Zmniejszenie obciążenia pamięci użytkownika – informacje z otoczenia Cenny mechanizm dla urządzeń mobilnych Łatwiejsze odnalezienie się w świecie pełnym treści (np. sugestie innych użytkowników na dany temat);

Przykład wzorca- urządzenia mobilne

Troska o zdrowie nadgarstka

Po drugie. To co niewidoczne dla oczu.  Oprogramowanie w sposób dyskretny tworzy listę możliwych uzupełnień  Jeśli potencjalnych danych jest dużo to: gromadzimy je w preferencje lub zbiory wykorzystujemy z wbudowanego słownika pojęć ( np. na podstawie tego, co wcześniej ktoś napisał) używamy gotowych zasobów (np. jak w przypadku wyszukiwarki w witrynie) Kojarzymy je w pewne konteksty (np. listy kontaktowe itd.)

Po trzecie. Sposób podejścia. Używamy tabulatora do automatycznego uzupełniania Czekamy aż pozostaje tylko jedno możliwe trafienie i dopiero je wyświetlamy

SELECT FROM … Czyli ROZWIJANY SELECTOR

WORD – SELEKTOR Z PALETĄ KOLORÓW Otwarty podczas wyboru koloru Zamknięty po dokonaniu wyboru – z widocznym wybranym parametrem

Czym jest? Jest niczym innym jak rozwijanym lub wyskakującym panelem Kiedy używać? Kiedy użytkownik ma wybrać konkretne dane z konkretnego zbioru Po co i dlaczego używać? Na małym obszarze gromadzimy rozbudowane funkcjonalności Takie rozwiązanie nie „zaciemnia” nam obszaru interfejsu, gdyż zazwyczaj selektor jest automatycznie ukrywany po kliknięciu – wybraniu określonej opcji

Selektor może zawierać listę – scroll po prawo

SELEKTOR bezpośrednio widoczny w przyborniku + pomocnicze okno selektora

KREATOR LISTY

Wybieramy dane np. ze zbioru. Z tego wynika prosta zależność: Lista źródłowa->lista docelowa

Kiedy używać? Aby np. ograniczyć pewne funkcjonalności z większej ilości do konkretnych, często używanych przez użytkownika Po co? Aby uprościć interfejs tzn. aby użytkownik nie musiał ciągle „przeskakiwać” do nowych okien i porównywać z kolejnymi. Na jednej stronie znajdują się obok siebie konkretne dane, wartości zestawione w klarowny sposób. Użytkownik widzi „co jest czym” i nie musi się długo zastanawiać”

POPRAWNE WARTOŚCI DOMYŚLNE

PRZYKŁAD: Po co używać? Aby zmniejszyć ilość pracy, którą użytkownik musi wykonać Jak używać? Wypełnij pola, kontrolki wartościami domyślnymi, które wydają się prawdopodobne Wykorzystaj informacje, które były wprowadzone wcześniej

Jeszcze jeden przykład:

NIE NALEŻY! Zadawać użytkownikowi uciążliwych pytań w celu określenia poprawnej wartości Wprowadzać wartości „na siłę” kiedy wydaje Ci się, że tak być powinno – to tylko twoje własne spostrzeżenie

ZLOKALIZOWANE KOMUNIKATY O BŁĘDACH

PRZYKŁADY:

O co w tym chodzi? Przeznaczeniem tego typu komunikatów jest poinformowanie użytkownika o błędach wynikających z niewłaściwego użytkowania np. formularza z danymi itp. Kiedy tego użyć? Kiedy użytkownik ma możliwość wpisania/pominięcia danych do formularza, których interfejs nie może zaakceptować A teraz złota myśl Zaletą tego typu rozwiązania jest to, że komunikaty o błędach pojawiają się na bieżąco, przez co nie dochodzi do ich kumulacji na końcu procesu np. wypełniania formularza.

I co dalej? Jak coś takiego zaprojektować? Przepis na dziś Na początku zastanów się jaki układ interfejsu maksymalnie zminimalizuje występowanie błędów. W przypadku pól tekstowych ułatw podawanie danych przy użyciu: o WSKAZÓWEK o ZAPYTAŃ o FORMATU POBŁAŻLIWEGO o AUTOMATYCZNEGO UZUPEŁNIANIA o POPRAWNYCH WARTOŚCI DOMYŚLNYCH Jeśli błąd jednak wystąpi zamieść go obok konkretnego pola aby użytkownik wiedział dokładnie jakie zmiany ma wprowadzić Spraw aby komunikaty były dobrze widoczne

Dane wprowadzane weryfikuj po stronie klienta, staraj się aby ten proces był wykonywany na bieżąco Komunikaty powinny być krótkie, lecz dostatecznie szczegółowe Posługuj się potocznym językiem a nie mową specjalistyczną Bądź przyjazny Odrobina humoru nie zaszkodzi