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

Ź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 www.perceptualedge.com  Library

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

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

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

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 Prototyp wykonywalny Jeśli trzeba, wróć do 5 Interfejs docelowy

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

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

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

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

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ń

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

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.

Model-View-Controller Podejś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

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?

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

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

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

25% rynku

25% rynku: czy na pewno?

To samo jako wykres słupkowy

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

Czemu nie tak:

Jeszcze trudniej

Rzeczywistość a złudzenia

To jeszcze nie wszystko

Można jeszcze gorzej

i gorzej

Pole

Pole: po co?

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

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

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

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ą

Orientacja w systemie pomocy

Wpisywanie nazwiska pacjenta

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

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

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

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

Sposoby oceny Monitorowanie – rejestracja użytkowania Kwestionariusze 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

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

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

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

”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ę