Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1!

2 Idag! Swings GUI-komponenter! Om användare Upplägg! Föreläsningar! Obligatoriska övningar! 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 2!

3 Interaktionsdesignspraxis! Fastställ behov och krav! loop!utveckla alternativa designförslag!bygg interaktiva prototyper för kommunikation and analys!utvärdera designen baserat på prototyperna! end loop 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 Graphical Interfaces Design Methods Analysis Methods Human Centred Design Course Physical Computing Ubiquitous Computing Interaction Design Project 3!

4 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 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 4!

5 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å 5!

6 Components & Containers! De block GUI:s byggs av! Går igenom alla snabbt! Sen anses man känna till dessa! 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 6!

7 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 7!

8 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 8!

9 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 9!

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

11 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 11!

12 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 ORGANISERA INNEHÅLL 12!

13 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 JPanel! Allmän container för att organisera saker! Här en röd med ett par blå i! Bygga upp GUI hierarktiskt 13!

14 JSplitPane! Dela upp i justerbara ytor! Horisontellt eller vertikalt! Kan nästas! Kan styra fördelning!weight! Kan ha snabb-knappar!onetouchexpandable 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 14!

15 JLayeredPane! Flera lager på varandra! Se Swing Tutorial! Öppnar möjligheter snarare än att vara standardkomponent VISA INFO 15!

16 JLabel! Visa info för användare! Unselectable! Bild! Text! Bild + text! HTML! Ritar inte sin bakgrund!setopaque(true) JToolTip! Behöver man inte programmera direkt! Ofta bra för användaren!utforska!vet man trycker man innan de visas! Component.setToolTipText( En text ); 16!

17 JProgressBar! Om man blockerar interaktion under en tidsperiod bör man alltid visa en progressbar och erbjuda möjlighet att avbryta BASIC CONTROLS 17!

18 JButton! Standard action-grej! Kan konfigureras på olika sätt! Mnemonics! Icons! Text! Borders! JToggleButton! On/Off! Oberoende! Grupperade 18!

19 JCheckBox & JRadioButton! Välkända JList! Ett sätt att välja något! Kan ha flera olika selection-varianter! JListModel och JListSelectionModel! Icke-statiska ger ofta behova av att anpassa modellen! Single-selection i labben?!kod för att ordna och sortera finns i lab1backend 19!

20 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 JTextField! Mata in en rad text!actionperformed vid retur! Varianter!JFormattedTextField!JPasswordTextField! Relaterade!JSpinner!JComboBox 20!

21 JTextArea! Flera rader oformatterad text!en rad JTextField! Placeras ofta i en JScrollPane JSlider & JSpinner! Input av data med begränsningar 21!

22 KOMPLEXA JTree! Strukturerad data! Kan anpassas på många sätt! Kräver ofta justerad kod/modell! Inte för datorovana 22!

23 JTable! Tabellformad data! Anpassningsbar! Modell! JEditorPane & JTextPane! Formatterad text! Kräver sin egen genomgång 23!

24 JColorChoser! Komponent man kan placera varsomhelst! Stöd för dialog JFileChooser! Open! Save! Bibliotek eller inte! Filtyper 24!

25 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 25!

26 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. 26!

27 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 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! 27!

28 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 Några patterns Eller snarare allmänna egenskaper som är önskvärda! (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 28!

29 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 29!

30 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! Att göra! Titta igenom alla Swing-komponenter!Veta vad som finns och vad de gör!swing-tutorial på nätet! Läsa Preface och kapitel 1 i Tidwell! Nästa gång!mer om användare!fler designmönster!swing/appframework 30!