1 Inżynieria Oprogramowania 7. Projektowanie interfejsów26/03/2017 Inżynieria Oprogramowania 7. Projektowanie interfejsów Leszek J Chmielewski Wydział Zastosowań Informatyki i Matematyki SGGW

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 Edge  Library

3 Plan Wstęp Zasady projektowania interfejsu użytkownikaInterakcja z użytkownikiem Prezentacja informacji Ocena interfejsu Podsumowanie

4 Plan Wstęp Zasady projektowania interfejsu użytkownikaInterakcja z użytkownikiem Prezentacja informacji Ocena interfejsu Podsumowanie

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

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

7 Plan Wstęp Zasady projektowania interfejsu użytkownikaInterakcja z użytkownikiem Prezentacja informacji Ocena interfejsu Podsumowanie

8 Ograniczenia użytkownikówograniczona 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żytkownikapoję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żytkownikaInterakcja z użytkownikiem Prezentacja informacji Ocena interfejsu Podsumowanie

11 Dwa kierunki Użytkownik  system: InterakcjaSystem  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żytkownikaInterakcja 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-ControllerPodejście MVC (Model-View-Controller, Model-Widok-Koordynator) (Smalltalk, 1983) Użytkownik działania użytkownika Stan koordynatora Metody koordynatora modyfikacje modelu modyfikacje widoku Stan widoku Metody widoku Stan modelu Metody modelu zapytania i aktualizacje

15 Wiele sposobów interakcjiCzynniki 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ć daneNawet, jeśli forma jest podobna

18 Kilka uwag o prezentacji danychSł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 wskazaniaTrudne 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 powierzchnieOdpowiedzi: od 6 do 50 To jest 16

32 Prezentacje graficzne i porównaniaRaczej 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żniespokojne, 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ź, przyjmij zamiast 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ęcznikiOpis 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 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żytkownikaInterakcja z użytkownikiem Prezentacja informacji Ocena interfejsu Podsumowanie

40 Szacowanie wartości interfejsuOcena 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 Kwestionariuszekamery, 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 ruchyZmiany 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żytkownikaInterakcja z użytkownikiem Prezentacja informacji Ocena interfejsu Podsumowanie

44 Podsumowanie Projektowanie skoncentrowane na użytkownikupoję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 Kaufmann Publishers, San Francisco, CA, 2003. Dziękuję