Projektowanie Graficznych Interfejsów Użytkownika

Transkrypt

Projektowanie Graficznych Interfejsów
Użytkownika
Robert Szmurło
LATO 2007
1
Projekt wizualny
Bezpośredni wpływ na użyteczność mają:
–
Zgodność z projektem abstrakcyjnym
–
Czytelność reprezentowanych obiektów
Zgodność jest również realizowana na innych poziomach:
–
zgodność ze środowiskiem - odpowiednia metafora interfejsu
–
zgodność z wytycznymi platformy
–
...
LATO 2007
2
Wytyczne Mac OS - Pionier!
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html
LATO 2007
3
Introduction to Apple Human Interface Guidelines
Cytat z: http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html
„These guidelines are designed to assist you in developing products that provide Mac OS X
users with a consistent visual and behavioral experience across applications and the
operating system. Following the guidelines is to your advantage because:
–
Users will learn your application faster if the interface looks and behaves like applications
they’re already familiar with.
–
Users can accomplish their tasks quickly, because well-designed applications don’t get in the
user’s way.
–
Users with special needs will find your product more accessible.
–
Your application will have the same modern, elegant appearance as other Mac OS X
applications.
–
Your application will be easier to document, because an intuitive interface and standard
behaviors don’t require as much explanation.
–
Customer support calls will be reduced (for the reasons cited above).
–
Your application will be easier to localize, because Apple has worked through many
localization issues in the Aqua design process.
–
Media reviews of your product will be more positive; reviewers easily target software that
doesn’t look or behave the way “true” Macintosh applications do.
The implementation of Apple’s human interface principles make the Macintosh what it is: intuitive,
friendly, elegant, and powerful.”
LATO 2007
4
Przykład: wytyczne projektowe - GNOME
Kolory ikon, tła,
elementów specjalnych
Rozmieszczenie i
odległości
w oknie dialogowym
LATO 2007
5
Przykład: wytyczne projektowe - Java
Wymagania dotyczące
różnych postaci menu.
Ponownie okna
dialogowe.
Java Look and Feel Design Guidelines
LATO 2007
6
Szczegóły dotyczące menu,
skróty, lokalizacja,
nomenklatura elementów,
wytyczne dotyczące
elementów nieaktywnych
LATO 2007
7
LATO 2007
8
Wytyczne
Prześledzimy główne elementy wytycznych projektowych dla:
–
GNOME
–
Microsoft Windows Vista
–
KDE
LATO 2007
9
Wytyczne GNOME
GNOME Human Interface, Guidelines 2.0, The GNOME Usability Project, ok. 150 stron,
Rozdziały:
–
Podstawy użyteczności
–
Integracja z pulpitem
–
Okna
–
Menu
–
Paski narzędzi
–
Kontrolki
–
Reakcja
–
Projekt wizualny
–
Ikony
–
Interakcja użytkownika
–
Język
–
Checklisty
LATO 2007
http://developer.gnome.org/projects/gup/hig/
10
GNOME – podstawy użyteczności
Oto lista elementów na które zwraca baczną uwagę dokument
specjalistów wokół środowiska GNOME:
–
Projektuj dla ludzi
–
Nie ograniczaj dziedziny użytkowników
–
Używaj metafor
–
Utrzymaj zgodność aplikacji
–
Informuj użytkownika
–
Niech będzie prosta i ładna
–
Niech użytkownik trzyma kontrolę
–
Wybaczaj użytkownikowi
–
Udostępnij możliwość
bezpośredniej manipulacji
LATO 2007
11
GNOME - Integracja z pulpitem
Umieszczenie skrótu do naszej aplikacji w menu
aplikacji GNOME ('Application menu')
–
Nazewnictwo: oprócz nazwy 'marketingowej' dołącz
człon związany z funkcjonalnością
●
–
–
Epiphany zastąp Epiphany Web Browser
Usuń niepotrzebne człony:
●
GNOME Image Viewer zastąp Image Viewer
●
GTK Blog Editor zastąp Blog Editor
Podpowiedzi (tooltips, dymki)
●
używaj trybu rozkazującego, opisz najważniejsze
zadania, podpowiedzi muszą być zwięzłe, ale
dawać więcej informacji niż sama nazwa
Jeżeli aplikacja operuje na dokumentach to
zarejestrujmy skojarzenie z nią danego
dokumentu. (otwieranie)
LATO 2007
12
GNOME - Okna
Elementy okien i interakcja z systemem
Okna podstawowe
Okna pomocnicze
Ostrzeżenia
Okna postępu
Okna dialogowe
Asystenci (kreatory)
LATO 2007
13
GNOME - Menu
Pasek menu
Drop-down menus
Submenus
Popup menus
Projektowanie menu
–
Grupowanie tematyczne elementów
–
Typy pozycji: komendy, zmienne
pozycje, checkbox, radio button
Standardowe menu
LATO 2007
14
GNOME – paski narzędzi
Wygląd i zawartość
Pionowe paski narzędzi (generalnie nie używać :-)
Kontrola wyświetlania i wyglądu
–
Umożliw dostosowanie wyglądu
–
Ukrywanie bezpośrednio w menu Widok (View) jeśli do 3
–
Ukrywanie w podmenu Widok-Paski narzędzi jeśli więcej niz 3
–
Opisy i podpowiedzi
●
●
●
LATO 2007
Dla odpowiedników w menu zastosuj to samo nazewnictwo
Nie udostępniaj skrótów klawiszowych (ten samo kontekst co
menu)
Pamiętaj o „znaczących” podpowiedziach
15
GNOME - kontrolki
Kontrolki czy widgety?
Aktywność kontrolek (sensitivity)
sensitive
insensitive
Pola tekstowe (text entry)
Spin-box
Slider
Przyciski
Checkboxes
(... i wiele innych)
LATO 2007
16
GNOME - reakcja
Charakterystyka aplikacji interaktywnej (responsive application)
–
Maksymalne czasy odpowiedzi:
●
●
●
0.1 s – kliknięcie myszką, ruch wskaźnika, przesunięcie okna, wciśnięcie
klawisza, przycisku myszki
1 s – wyświetlanie okna postępu zadań, wykonywanie standardowych komend
użytkownika, wykonywanie zadań w tle,
10 s – wyświetlanie wykresów lub innych elementów, o których użytkownik
spodziewa się, że są pracochłonne,
Techniki do poprawiania odbioru aplikacji przy długich reakcjach:
–
wyświetl informację jak najszybciej to możliwe, jeżeli nie całość to chociaż
najważniejszy fragment,
–
pokazuj przybliżone wyniki zanim wyznaczysz dokładne,
–
przygotuj wcześniej dane przewidując typowe komendy
–
mniej ważne czynności wykonuj w tle,
–
dynamicznie zarządzaj czasem
–
wyświetlaj przybliżony czas za ile zostanie zakończone wykonywanie zadania
LATO 2007
17
GNOME - reakcja
Typy wizualnej prezentacji postępu:
–
wskaźnik myszki
–
animacje z postępem zadania
–
paski postępu
–
pasek stanu
–
okna z 'checklistami'
Umożliwiaj przerwanie operacji:
–
Cancel – gdy przerwanie operacji powoduje całkowite cofnięcie procesu, nie
pozostają żadne efekty,
–
Stop – gdy przerwanie operacji pozostawi jakieś efekty, które nie mogą być cofnięte
–
W oknach z potwierdzeniami konkretnie nazywaj przyciski komend:
LATO 2007
●
Używaj: Kontynuuj usuwanie plików? [Kontynuuj usuwanie] [Przerwij usuwanie]
●
Zamiast: Operacja anulowana, kontynuować? [Tak] [Nie]
18
GNOME – projekt wizualny
Używaj palety kolorów GNOME:
Układ kontrolek w oknach:
LATO 2007
19
GNOME – projekt wizualny
Specyfikacja układu
Nazewnictwo elementów
–
wielkie litery
●
●
LATO 2007
header capitalization
sentence capitalization
20
GNOME – interakcja użytkownika
Myszka
–
przyciski
●
staraj się zachować niezależność od prawego i środkowego
przycisku
–
upewnij się, że każda operacja w twojej aplikacji może być
wykonana zarówno za pomocą myszki jak i klawiatury
–
nie 'ubezwłasnawalniaj' kursora, nie ograniczaj jego obszaru, po
którym może się przemieszczać,
–
nie wymagaj wciskania kilku klawiszy myszki jednocześnie,
–
zezwól anulować operację myszki po wciśnięciu klawisza ESC,
–
staraj się nie uzależniać od konkretnych przycisków myszki,
LATO 2007
21
GNOME – interakcja użytkownika
Wszystkie funkcjonalności aplikacji dostępne za pomocą klawiatury,
Kontroluj logiczną nawigację za pomocą TAB,
Zaznaczanie myszką = zaznaczanie klawiaturą dla każdego tekstu,
Nie przesłaniaj standardowych komend
Unikaj wielokrotnego wciskania tego samego klawisza
LATO 2007
22
Windows Vista
LATO 2007
23
Windows Vista
Co nowego w Vista?
Główne zasady „Windows Vista User Experience”
Wytyczne:
–
Podstawy
projektowania
–
Kontrolki
–
Komendy
–
Tekst
–
Interakcja
–
Okna
–
Estetyka
–
Integracja ze
środowiskiem
Windows
LATO 2007
http://msdn.microsoft.com/library/default.asp?
url=/library/en-us/UxGuide/UXGuide/Resources/
TopRules/TopRules.asp
24
Vista – wybrane nowości
Command links
–
Zamiast przycisków
gdy potrzeba dłuższych opisów.
Tabs (zakładki)
–
Mniejsze.
Notification
–
Udoskonalone, nie są
pokazywane od razu...
Search Boxes
–
prawy górny róg,
–
kontekstowość
–
dwa tryby: wyszukiwania po wciśnięciu oraz na bieżąco
podpowiadając
LATO 2007
25
Vista – wybrane nowości
Task dialogs – specjalne okna dialogowe które umożliwiają wybranie
jednej z wielu dostępnych opcji
Elementy:
●
●
●
●
●
LATO 2007
Title bar
Main instruction
Content area
Command area
Footnote area
26
Kreatory AERO
Okna mogą zmieniać rozmiar,
Usunięto okna rozpoczęcia i
zakończenia,
Główna instrukcja dla każdej
strony,
Przycisk cofnij przeniesiony w
standardową lokalizację
Strony:
–
Getting started
–
Choice pages
–
Commit page
–
Progress page
–
Follow-up page
LATO 2007
27
Vista - UAC (User Account Control)
Gdy zadanie wymaga podniesienia poziomu uprawnień:
–
1 krok: Punkt wejściowy z ikoną
–
2 krok: Podniesienie poziomu
LATO 2007
28
Vista – główne zasady
–
Top Rules for the Windows Vista User Experience
●
●
●
●
●
●
●
●
●
●
●
●
1. Używaj schematów oraz fontów systemowych (Segoe UI)
2. Używaj standardowych kontrolek i okien dialogowych
3. Używaj standardowych ramek okien, rozsądnie wykorzystuj
efekt przezroczystości
4. Używaj ikon i grafiki zgodnej z stylem i jakością Windows Vista
5. Use task dialogs for new or frequently used dialog boxes and
error messages
6. Używaj kreatorów Aero
7. Twórz interfejsy osadzone w Windows Explorer, które są
nawigowalne i udostępniają przycisk Wstecz (Back button)
8. Wykorzystuj model wyszukiwania zgodny z Windows Search
9. Używaj stylu Windows Vista w kontrolkach zawierających tekst
10. Porządkuj UI
11. Powiadomienia wykorzystuj rozsądnie
12. Rezerwuj czas na “fit and finish”!
LATO 2007
29
Interakcja
Dziękuję za uwagę.
Chcemy być coraz lepsi!
Jeżeli coś cię zainteresowało napisz e-maila:
–
[email protected]
Jeżeli coś cię bardzo znudziło napisz e-maila:
–
[email protected]
Jeżeli zauważyłeś błąd napisz e-maila:
–
LATO 2007
[email protected]
30

Projektowanie Graficznych Interfejsów Użytkownika

Transkrypt

Podobne dokumenty

Babie lato Na pajęczych nitkach odlatuje lato . Dokąd leci , kto to wie

Projektowanie Graficznych Interfejsów Użytkownika

biul 2016 - Fundacja Opieka i Troska

Nazwa: Architekt stron internetowych Kod: 251301 Synteza

Pierwszy Dzień Lata

Grafik komputerowy

Wydarzenia w dniu 2016-07-22

Szkolniaczek nr 5 – Wakacje