Format Pobłażliwy Format S trukturalny Uzupełnianie Wskazówki Zapytania

1. 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

2. FORMAT POBŁAŻLIWY

3. 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.

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

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

6. UWAGA BĘDZIE PRZYKŁAD!

8. Tutaj też zastosowano Format Pobłażliwy

9. Jest jednak haczyk!

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

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

12. FORMAT STRUKTURALNY

13. 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)

14. Obowiązkowo zatwierdzamy dane!

15. 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)

16. 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.

17. UZUPEŁNIANIE

18. Tak wygląda:

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

20. 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.

21. WSKAZÓWKI

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

23. A tak wyglądają:

24. 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

25. ZAPYTANIA

26. Jak wygląda zapytanie?

27. 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ć.

28. 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

29. MIERNIK BEZPIECZEŃSTWA HASŁA

30. Zanim o wzorcu to zastanówmy się

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

32. 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. B@Lucz$mP0. • Powyższy przykład jest tylko jedną z metod, jakie można wykorzystać do stworzenia silnego hasła. Źródło:http://www.ingbank.pl

33. 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. „mojeh@sło”, • nie zawiera całego wyrazu słownikowego, • różni się znacznie od poprzednich haseł, • nie zawiera powtórzeń znaków (np. 111111111), sekwencji (np. abcdefgh), ani ciągów znaków występujących obok siebie na klawiaturze (np. QWERTY). Źródło:http://www.ingbank.pl

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

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

36. Automatyczne uzupełnianie

37. Tak wygląda:

38. Jak to jest zrobione???

39. 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

40. 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);

41. Przykład wzorca- urządzenia mobilne

42. Troska o zdrowie nadgarstka 

43. 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.)

44. 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

45. SELECT FROM … Czyli ROZWIJANY SELECTOR

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

47. 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

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

49. SELEKTOR bezpośrednio widoczny w przyborniku + pomocnicze okno selektora

50. KREATOR LISTY