Inżynieria Oprogramowania 7. Projektowanie interfejsów

1. Inżynieria Oprogramowania7. Projektowanie interfejsów Leszek J Chmielewski Wydział Zastosowań Informatyki i MatematykiSGGW www.lchmiel.pl

2. Źródła • Materiały dra Waldemara Karwowskiego, wykładowcy w poprzednich semestrach • Ian Sommerville, Inżynieria Oprogramowania, WNT, Warszawa 2003 • Stephen Few, Perceptual Edgewww.perceptualedge.com Library

3. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

4. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

5. Wstęp • Rodzaje interfejsów • tekstowe • graficzne • Interfejsy tekstowe: • systemy odziedziczone • wybrane systemy profesjonalne • Tu zajmiemy się i. graficznymi

6. Proces tworzenia interfejsu • Analiza czynności użytkownika • Prototyp – a tani i prosty, np. papierowy • Ocena z udziałem użytkowników • Jeśli trzeba, wróć do 2 • Prototypwykonywalny • Ocena z udziałem użytkowników • Jeśli trzeba, wróć do 5 • Interfejs docelowy

7. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

8. Ograniczenia użytkowników • ograniczona pamięć krótka • błędy gdy dużo informacji • błędy pod presją • różne możliwości psychiczne • zróżnicowana wiedza i doświadczenie • różne możliwości intelektualne

9. Zasady • Blisko użytkownika • pojęcia ze świata użytkowników, nie programistów • Spójność • podobne operacje wykonywane w taki sam sposób • o ile możliwe • Minimum niespodzianek • irytacja wynikiem nieoczekiwanych zdarzeń • Możliwość wycofania • wielopoziomowe wycofanie z błędów, nie od razu zauważonych • potwierdzenie operacji nieodwracalnie destrukcyjnych • Porady dla użytkownika • konstruktywne, kontekstowe, minimalnie obciążające • Rozróżnianie użytkowników • stali, wprawni, profesjonalni, okazjonalni, niepełnosprawni

10. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

11. Dwa kierunki • Użytkownik  system: Interakcja • System  użytkownik: Prezentacja • Rodzaje interakcji (rozumianej jw.) • Działanie bezpośrednie – na obiektach • Wybór z menu • Wypełnianie formularza • Język poleceń • Język naturalny – pisany, mówiony • Każda ma wady i zalety • Różne obszary zastosowań

12. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

13. Prezentacja  obiekty • Dobra praktyka: Oddzielenie prezentacji od danych •  sprzeczna z programowaniem obiektowym • jednak, struktury danych można prezentować na różne sposoby • np. w różnych etapach, na różnych poziomach szczegółowości, różnym użytkownikom itp.

14. Model-View-Controller • Podejście MVC (Model-View-Controller, Model-Widok-Koordynator) (Smalltalk, 1983) Użytkownik działania użytkownika Stan koordynatoraMetody koordynatora modyfikacje modelu modyfikacje widoku Stan widokuMetody widoku Stan modelu Metody modelu zapytania i aktualizacje

15. Wiele sposobów interakcji Czynniki wyboru: • Czy potrzeba dokładnej informacji, czy jakościowej, np. związki, relacje? • Jak szybko zmienia się informacja? Czy użytkownik musi widzieć zmiany natychmiast? • Czy użytkownik musi reagować na zmiany, czy tylko obserwować? • Czy informacja jest tekstowa, numeryczna, graficzna?

16. Elementy graficzne • Prezentacja tych samych danych na różne sposoby

17. Cywilizacja zegarów • Trudno porównywać dane • Nawet, jeśli forma jest podobna

18. Kilka uwag o prezentacji danych • Słabo oceniamy kąty i powierzchnie

19. 25% rynku

20. 25% rynku: czy na pewno?

21. To samo jako wykres słupkowy

22. Mimo to spotykamy... • Porównaj wskazania • Trudne nawet, jeśli podobne w formie

23. Czemu nie tak:

24. Jeszcze trudniej

25. Rzeczywistość a złudzenia

26. To jeszcze nie wszystko

27. Można jeszcze gorzej

28. i gorzej

29. Pole

30. Pole: po co?

31. Porównaj powierzchnie • Odpowiedzi: od 6 do 50 • To jest 16

32. Prezentacje graficzne i porównania • Raczej słupki, niż kąty • Raczej kąty, niż powierzchnie • Słupki równoległe, nie szeregowe • Wartości liczone od prawdziwego zera • Wyraźnie zaznaczone wartości krytyczne • Wykresy • jeśli ważna jest historia • jeśli czas szybko płynie

33. Kolor • Ogranicz liczbę kolorów, używaj ostrożnie • spokojne, stonowane palety • Zmiana koloru = zmiana stanu • Korzystaj z kodów kolorów • czerwony: • dla kierowcy – niebezpieczeństwo • dla chemika – wysoka temperatura • dla fizyka – niska temperatura • Korzystaj spójnie i rozsądnie • Uważaj na związki między kolorami • czerwony – niebieski • Uważaj na ograniczenia • różna jakość ekranów • Uważaj na ograniczenia i wady wzroku • daltonizm

34. System pomocy • Dwa przypadki: • HELP! potrzebuję pomocy! • Help. potrzebuję informacji • Przygotowany przez/wraz ze specjalistami w dziedzinie zastosowania oprogramowania • Kontekstowy • Uwzględniający doświadczenie i umiejętności użytkownika • różne poziomy pomocy • unikaj nieczytelnych kodów błędów • unikaj niejednoznacznie oznaczonych sposobów reakcji (np. OK, NIE, zamknij, wyjdź, przyjmijzamiast akceptuj, cofnij) • Styl pozytywny, nigdy negatywny • daj wybór objaśnionych działań, wyjaśnij proces • Nigdy złośliwość ani żartobliwość • Uwzględniający kulturę kraju • realnie, unikając naiwnych sądów • tłumaczenie na miejscu a nie za granicą

35. Orientacja w systemie pomocy

36. Wpisywanie nazwiska pacjenta

37. Komunikaty błędu • Zorientowany na system i na użytkownika

38. Dokumentacja użytkownika – Podręczniki • Opis funkcjonalny • b. krótko • opis usług • do decyzji: kupić? • Podręcznik instalatora • Przewodnik podstawowy • minimalny opis normalnych działań • wiele przykładów • jak wycofać się po podstawowych pomyłkach • Podręcznik • opis usług • opis ich wykorzystywania • lista komunikatów o błędach, przyczyny i sposoby zaradcze • Skrócona karta udogodnień – do szybkiego przypomnienia • Podręcznik administratora • pełny opis funkcjonalności • opis sprzętu, konfiguracji, ...

39. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

40. Szacowanie wartości interfejsu Ocena względem specyfikacji • Łatwość uczenia • Szybkość działania • Solidność – odporność na błędy (fool proof) • Zdolność do wycofania z błędów • Zdolność do adaptacji

41. Sposoby oceny • Monitorowanie – rejestracja użytkowania • kamery, zapisy działań • etnografia • duży koszt • Kwestionariusze • klarowne pytania z oczywistymi odpowiedziami • Prosta obserwacja + „głośne myślenie” • Krótkie filmy • Kod gromadzący informacje • Testerzy-ochotnicy + uwzględnianie opinii

42. Podstawowe błędy • Częste, nienaturalne przenoszenie wzroku • Długie ruchy • Zmiany operacji klawiatura/mysz • Menu górne, dolne, boczne, ... • Zawiłe, długie menu • Nienaturalne, nietypowe grupowanie funkcji • Działanie wbrew przyzwyczajeniom • Bogate zdobnictwo, przepych i ornamenty • Mała odporność • Zepsuć zawsze można

43. Plan • Wstęp • Zasady projektowania interfejsu użytkownika • Interakcja z użytkownikiem • Prezentacja informacji • Ocena interfejsu • Podsumowanie

44. Podsumowanie • Projektowanie skoncentrowane na użytkowniku • pojęcia użytkownika, spójność i logika, ergonomia, udogodnienia, pomoc • Naturalna interakcja, dobrana do zastosowania • Prezentacja danych odpowiednia do celu • informacje ilościowe, jakościowe • Oszczędny, spójny kolor • uwzględnione częste wady wzroku • zgodność z kulturą miejsca • Pomoc kontekstowa • potrzebuję pomocy • potrzebuję informacji • nie podkreśla winy użytkownika, ale pomaga zaradzić • Dokumentacja do wszystkich zastosowań • Ocena ilościowa, względem specyfikacji

45. ”People are primarily interested in focusing on their tasks and not on operating the interface” • ”The computer becomes a "tool" in the best sense of the word—an extension of the user's body” Ben Bederson and Ben Shneiderman, The Craft of Information Visualization, Morgan KaufmannPublishers, San Francisco, CA, 2003. Dziękuję