Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1

2 Idag Läsanvisningar Finns på kurshemsidan under resurser Kommer att förklaras mer senare Kursutvärdering Om användare Swings GUI-komponenter Kursutvärdering Behöver 2 representanter till kursutvärderingsprocessen Resultat förra året < 20% svarade Kursen ok Studentrepresentanter tyckte att kursen påverkat deras syn på GUI:n Mer programmering än väntat Åtgärd talar om detta tydligare Mycket att göra i slutet, lite i början Åtgärd 1 läs från början Åtgärd 2 lab 1 startar första dagen Åtgärd 3 kommer att styra upp projektet mer 2

3 Upplägg Föreläsningar Obligatoriska övningar, onsdag Labbar Utförs i par Projekt Utförs i grupp om 4 Tenta Betyg sammanvägning av projekt och tenta Lab och övning inget betyg bara G Alla moment måste genomföras Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop 3

4 Interaction Designer Viktiga färdigheter Arbeta i team Designpraxis och erfarenhet IT-material Vad kan man göra? Interface design Designmetoder Prototyping Skissa Mjukvara Hårdvara (sensors and actuators) Fysiska material Utvärderingsmetoder 1 Graphical Interfaces 2 Design Methods 3 Analysis Methods 4 Human Centred Design Course Physical Computing Ubiquitous Computing Interaction Design Project Material The applications that are easy to use are designed to be familiar Tidwell xiii Viktigt för framgång Känna användarna Kunna sina GUI-idiom Kunna sin verktygslåda Swing Kunna sina mönster Tidwell (kursboken) 4

5 Användare och mål Lär känna användarna för de är inte (som) du GUI:t designar konversationen mellan människan och program Användning har ett mål Köpa en resa Skriva en uppsats Få underhållning Samverka socialt Sköta affärer Hålla sig uppdaterad Användares egenskaper Gamla? Unga? Nyfikna? Trötta Kunniga? Envetna? Tvingade? Bakgrund? Expert? Nybörjare? Enda säkra Olika och ofta perpetual intermediate 5

6 Typer av applikationer Nybörjare, tillfälliga användare Informationskiosker Inköp on-line Försäljningsautomater Installeringswizards Experter Photoshop NetBeans Sys-adminverktyg World of warcraft Väldigt olika förutsättningar forts Varken eller, dvs mittimellan Office E-post-program Webbläsare Mobilapplikationer Många program hamnar i denna kategori. Måste välja baserat på användare och deras mål. 6

7 Lära känna användarna Basen för all interaktionsdesign Samma person har inte samma mål med olika program Typiska saker att undersöka Användarnas mål med att använda mjukvaran De speciella uppgifter de utför för att uppfylla målen Vokabulär de använder för att beskriva vad de gör Hur bra de är på att använda liknande program Deras attityder till det de ska utföra Några metoder Direktobservation Observera och tala med användarna på plats. Intervjuer Ger sammanhang. Enkäter Mycket information. Missar direktkommunikationsinformation Översikt över det man faktiskt frågar om Personas Sammanställning av viktigaste egenskaperna i en fiktiv person 7

8 Om boken Ett antal kapitel som fokuserar på olika saker inom GUI-design Inledning med allmän teori Ett flertal designmönster Om designmönster Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Nytta Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade Några mönster Eller snarare allmänna egenskaper relaterade till användare som är önskvärda i princip alla program (1) Safe Exploration Kunna trycka runt utan oönskade effekter Inte bara allvarliga utan även enkla irritationsmoment (2) Instant Gratification Belöna användarna Gör första stegen enkla (visa rätt dokument/skärm) Inga störande inledande registreringsformulär, förklaringar, reklamskärmar etc Tar bort fokus 8

9 forts (3) Satisficing Satisfying+sufficing Typ bra nog. Väljer hellre bra nog än att lära sig ordentligt Stöd utforskande, var tydlig (4) Changes in Midstream Man ändrar sig eller kommer in på ett sidospår Stöd detta Global navigation Komma ihåg tidigare angivna värden forts (5) Deffered Choices Tvinga inte användarna fylla i massa information för tidigt Registreringsformulär Tonart, tempo, title innan man börjat Ge möjlighet att komplettera senare (7) Habituation That gesture works everywhere else; why doesn t it work here too? Man måste som designer kunna konventioner Ctrl-A, Ctrl-X, Ctrl-S Emacs vs Word 9

10 forts (8) Spatial Memory Flytta inte runt saker Ha knappar etc där de förväntas Egen konfigurering kan vara bra (11) Keyboard Only Kan förväntas Swing har omfattande stöd för detta Tabba runt Mnemonics Java Swing Designat för att kunna bygga riktiga GUI:n Innehåller de flesta vanligt förekommande gränssnittskomponenterna Dessa är byggstenar Måste veta vilka som finns och vad de passar till Använda dem så det som förväntas Windows, Linux, Mac har ungefär samma komponenter 10

11 UI Guidelines Alla plattformar har User Interface Guidelines Swing också Använda dessa eller plattformsguidelines? Del av GUI-designerns verktygslåda Hjälp med detaljer snarare än interaktionsdesign Behövs för riktiga applikationer Länkar finns på kurshemsidan Mera Swing MVC nämns ofta Swing snarare Separable Model View-Controller ihop Model för sig Man kan byta look&feel utan att påverka modellen Man kan byta modell utan att påverka look&feel För enkla komponenter som JButton behöver man inte bry sig om modellen Motsatsen gäller för t ex JTree, JTable En applikation kan ha en MVC-modell ändå 11

12 Components & Containers De block GUI:s byggs av Går igenom alla snabbt Sen anses man känna till dessa När man ska designa måste man veta vad som finns Inkluderar vissa saker från Swing UI Guidelines Alla Containers är Components Components kontroller Containers behållare för Components En Component måste finnas i en Container för att synas Swing-klasser JApplet JButton JCheckBox JCheckBoxMenuIte m JColorChooser JComboBox JComponent JDesktopPane JDialog JEditorPane JFileChooser JFormattedTextField JFrame JInternalFrame JLabel JLayeredPane JList JMenu JMenuBar JMenuItem JOptionPane JPanel JPasswordField JPopupMenu JProgressBar JRadioButton JRadioButtonMenuIt em JRootPane JScrollBar JScrollPane JSeparator JSlider JSpinner JSplitPane JTabbedPane JTable JTextArea JTextField JTextPane JTogglebutton JToolBar JToolTip JTree JViewport 12

13 Containers Top-Level Containers JFrame JApplet JWindow JDialog JPanel Används för att gruppera andra components JRootPane JFrame Applikationers huvudfönster Menyrad Ofta toolbar Rekommenderad titel Dokumentnamn Programnamn Swing Application Framework FrameView 13

14 JDialog Sekundära fönster Ingen menyrad Rekommenderad titel Beskrivande namn optional programnamn JMenuBar Menyrad- hanteras bra av NetBeans Några guidelines Använd bara ett ord i varje menytitel Använd välkända/standardbegrepp (Arkiv) Inkludera mnemonics Använd inte för sekundära fönster 14

15 JMenu Hanteras bra av NetBeans Ha inte samma namn på någon flera ggr Undvik mer än en nivå JMenuItem Ha inte samma namn på något item som på menyn Undvik flera nivåer Måste man ha flera nivåer så skapas de med JMenu Kan ha ikoner. Hjälper användare att komma ihåg vad toolbarbuttons gör Kortkommandon Allt kan göras i NetBeans utan kod 15

16 JSeparator Huvudsakligen för att gruppera menu-items JCheckBoxMenuItem Använd sparsamt Syns bara när menyn är framme Bättre än toggle-menyer 16

17 JRadioButtonMenuItem 1-av-flera-val Använd JSeparator ovanför/nedanför för att visa vilka som hör ihop JPopupMenu Kallas vanligen kontextmeny Alla vet nog hur det funkar 17

18 JToolBar För vanligt förekommanden kommandon Förekommer både med och utan labels Det man kan göra ska alltid finnas med i programmets menyer Förse alla knappar med tooltips Aktivitet Vilken användare är du? Fundera på nybörjare-expert-mittimellan Hitta ett eller flera program ur varje kategori där ni passar in själva 18

19 ORGANISERA INNEHÅLL JScrollPane För något som inte får plats Listor, tabeller, textdokument placeras typiskt i scrollpanes Automatiskt i NetBeans Standard visa bara vid behov Rekommenderas Horisontella tveksamma för t ex text 19

20 JPanel Allmän container för att organisera saker Här en röd med ett par blå i Bygga upp GUI hierarktiskt Behövs för allt utom de enklaste GUI I NetBeans blir det väldigt svårt att få önskade placeringar om man inte bygger upp med flera paneler JSplitPane Dela upp i justerbara ytor Horisontellt eller vertikalt Kan nästas Kan styra fördelning weight Kan ha snabb-knappar onetouchexpandable 20

21 JTabbedPane Mycket info på liten yta Relaterat men utan inbördes kopplingar Kan göras i NetBeans Inte fler än att en rad räcker Headline capitalization Nästa inte Tool tips JLayeredPane Flera lager på varandra Se Swing Tutorial Öppnar möjligheter snarare än att vara standardkomponent 21

22 VISA INFO JLabel Visa info för användare Unselectable Bild Text Bild + text HTML Ritar inte sin bakgrund som standard setopaque(true) 22

23 JToolTip Behöver man inte programmera direkt Ofta bra för användaren Utforska Vet man trycker man innan de visas acomponent.settooltiptext( En text ); Alla komponenter JProgressBar Om man blockerar interaktion under en tidsperiod bör man alltid visa en progressbar och erbjuda möjlighet att avbryta 23

24 BASIC CONTROLS JButton Standard action-grej Kan konfigureras på olika sätt Mnemonics Icons Text Borders 24

25 JToggleButton On/Off Oberoende Grupperade JCheckBox & JRadioButton Välkända Enval/flerval 25

26 JList Ett sätt att välja något Kan ha flera olika selection-varianter JListModel och JListSelectionModel Icke-statiska ger ofta behov av att anpassa modellen Single-selection i labben? Kod för att ordna och sortera finns i lab1backend JComboBox Redigerbara och icke-redigerbara Tar lite plats Kan användas i toolbars Ha inte för många items! Vanligt T ex JList bättre Eller filtrering Data från modell 26

27 JTextField Mata in en rad text actionperformed vid retur Varianter JFormattedTextField JPasswordTextField Relaterade JSpinner JComboBox JTextArea Flera rader oformatterad text En rad JTextField Placeras ofta i en JScrollPane 27

28 JSlider & JSpinner Input av data med begränsningar KOMPLEXA 28

29 JTree Strukturerad data Kan anpassas på många sätt Kräver ofta justerad kod/modell Inte för datorovana Tabellformad data Anpassningsbar Modell JTable 29

30 JEditorPane & JTextPane Formatterad text Kräver sin egen genomgång JColorChoser Komponent man kan placera varsomhelst Stöd för dialog 30

31 JFileChooser Open Save Bibliotek eller inte Filtyper Att göra Titta igenom alla Swing-komponenter Veta vad som finns och vad de gör Swing-tutorial på nätet, länk på hemsidan Läsa Preface och kapitel 1 i Tidwell Nästa gång Mer om användare Fler designmönster Swing/Appframework 31