T-121.300 KÄYTTÖLIITTYMÄSUUNNITTELU Luento 7. Graafisten käyttöliittymien kehitysvälineet

1. T-121.300KÄYTTÖLIITTYMÄSUUNNITTELULuento 7. Graafisten käyttöliittymien kehitysvälineet Marko Nieminen Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys Marko.Nieminen@hut.fi

2. Luennon sisältö • Hieman taustoja • Kehitysvälineiden yleisiä piirteitä • Käyttöliittymän rakentaminen erilaisilla välineillä • Tcl/tk • “RAD” • Sovellusaluespesifi käyttöliittymäkehitysympäristö • Arviointityökaluja Marko Nieminen

3. Käyttöliittymäkehitysympäristöt • Käyttöliittymäkehitysympäristöjen tarve tunnistettiin 1980-luvun alussa • Seeheim-arkkitehtuurimalli (1984) tarjosi puitteet käyttöliittymäkehitysympäristöjen toteuttamiselle • 1990-luvun alussa kehitysympäristöjä alkoi tulla markkinoille • tutkimuspuolella mm. Garnet (Myers 1992), josta on sittemmin kehittynyt Amulet Marko Nieminen

4. Taustaa • Käyttöliittymän toteuttaminen graafisiin käyttöliittymiin vaati aiemmin paljon työtä • esim: Hello, World! -- Toteutus kompleksista graafiseen käyttöliittymäympäristöön; hallittava monenlaiset matalan tason asiat: ikkunointi, viestinvälitys, resurssit jne. • Taitavat ohjelmoijat tuottavat käyttöliittymät yleiskäyttöisillä ohjelmointikielillä, esim C/C++; tämä suuntaus on kuitenkin vähenemässä erityisten käyttöliittymäkehitysympäristöjen kehittyessä Marko Nieminen

5. Esimerkki begin if HPrevInst = 0 then begin WindowClass.hInstance := HInstance; WindowClass.hIcon := LoadIcon(0, idi_Application); WindowClass.hCursor := LoadCursor(0, idc_Arrow); WindowClass.hbrBackground := GetStockObject(white_Brush); if not RegisterClass(WindowClass) then Halt(255); end; Window := CreateWindow( AppName, ’Window Title', ws_OverlappedWindow, cw_UseDefault, cw_UseDefault, cw_UseDefault, cw_UseDefault, 0, 0, HInstance, nil); ShowWindow(Window, CmdShow); UpdateWindow(Window); while GetMessage(Message, 0, 0, 0) do begin TranslateMessage(Message); DispatchMessage(Message); end; Halt(Message.wParam); end; program Generic; {$R TESTWIN} procedure WinMain; var Window: HWnd; Message: TMsg; const WindowClass: TWndClass = ( style: 0; lpfnWndProc: @WindowProc; cbClsExtra: 0; cbWndExtra: 0; hInstance: 0; hIcon: 0; hCursor: 0; hbrBackground: 0; lpszMenuName: AppName; lpszClassName: AppName); Marko Nieminen

6. Käyttöliittymän rakentaminen: liikkeelle protoilusta • Yksinkertaisimmillaan staattisia kuvia erilaisista vuorovaikutustilanteista: “diaesitys”, joka mahdollistaa todentuntuisen käyttötilanteen läpikäynnin, ei kuitenkaan todellista vuorovaikutusta • Hieman kehittyneempi ratkaisu mahdollistaa oikeiden käyttöliittymäelementtien sijoittelun näytölle ja etenemisen tilanteesta toiseen käyttäjän toiminnan mukaan • Monimutkaisempaa toiminnallisuutta prototyyppeihin saadaan liittämällä käyttöliittymään toiminnallista koodia; jotkut välineet mahdollistavat myös visuaalisen ohjelmoinnin Marko Nieminen

7. Kehitysvälineiden toiminnallisia piirteitä • Käyttöliittymä erillään toiminnallisuudesta • Mahdollisuus useiden käyttöliittymien toteuttamiseen • Mahdollisuus alustariippumattomuuteen • Käyttöliittymäarkkitehdin (työ)tehtävä mahdollinen (ei tiukkaa sidosta toiminnallisuuden koodaamiseen) • Menetelmät ja kuvaustavat • hahmottelu toimii myös määrittelytyönä; voivat toimia jopa osana sopimuksia vaatimusmäärittelyjen osalta • helpottaa suunnitteluratkaisuista keskustelua • Nopea prototyyppien hahmottelu • ratkaisuja voidaan kokeilla jo alkuvaiheessa • testataan-muokataan, testataan-muokataan, testataan-muokataan • Ohjelmisto- ja prosessituki • tuottavuus paranee, ylläpito helpottuu, tarkastukset helpompia jne. Marko Nieminen

8. Kehitysvälineiden teknisiä piirteitä • Tärkeää nopea luonnostelu • Visuaalinen käyttöliittymän suunnittelu • suunnittelija näkee nopeasti hahmottelemansa käyttöliittymän ulkoasun, vrt. mallinnus välineen avulla • usein tarjolla helpohko skriptikieli • tai yleiskäyttöisempi ohjelmointikieli • tapahtuma- tai oliopohjainen • joissakin välineissä myös visuaalinen ohjelmointi Marko Nieminen

9. Käyttöliittymäkehittimiä • Shneidermanin jako • Software engineering tools: C/C++ w/toolkits/libraries • Design tools: MacroMind Director, HyperCard, LabView, Visual Basic, Delphi, JBuilder • Eri toimittajat esittelevät kehitysympäristönsä eri nimikkeillä: • Rapid Prototyper • User Interface Builder • UIMS - User Interface Management System • UIDE - User Interface Development Environment • RAD - Rapid Application Developer Marko Nieminen

10. Am_Border_Rectangle: a rectangle with a raised (or lowered) edge, but no interaction. Am_Button: a single button Am_Button_Panel: a panel consisting of multiple buttons with the labels inside the buttons. Am_Checkbox_Panel: a panel of toggle checkboxes with the labels next to the checkboxes. Am_Radio_Button_Panel: a panel of mutually exclusively selectable radio buttons with the labels next to the radio buttons. Am_Menu: a menu panel Am_Menu_Bar: a menu bar used to select from several different menu panels Am_Option_Button: a button showing the current choice that pops up a menu of choices. Am_Pop_Up_Menu_Interactor: An interactor that pops up a menu. Often used with start-when as the right-button to get Windows95 style behaviors. Am_Vertical_Scroll_Bar: scroll bar for choosing a value from a range of values. Am_Horizontal_Scroll_Bar: scroll bar for choosing a value from a range of values. Am_Vertical_Up_Down_Counter: Two arrows (like the top and bottom of a scroll bar) for incrementing and decrementing a number. Am_Scrolling_Group: an Amulet group with (optional) vertical and horizontal scrollbars Am_Text_Input_Widget: a field to accept text input, like for a filename. Am_Number_Input_Widget: Text input widget that is limited to integer or floating point numbers. Am_Password_Input_Widget: Text input widget that shows ``*''s instead of the characters that are typed. Am_Selection_Widget: which supplies the conventional square selection handles around one or more graphical objects and allows them to be moved and grown. Kehittimet tarjoavat komponenttikirjaston(esim Amulet: “widgets, dialogs, command objects”; tässä “widgets”) Marko Nieminen

11. Esimerkki (Amulet): Painikkeen luonti An instance ofAm_Button Am_Object my_button = Am_Button.Create("My Button") .Set (Am_LEFT, 10) // set the position of the button .Set (Am_TOP, 10) .Set (Am_COMMAND,"Push Me"); // a string in the Am_COMMAND slot // specifies the button's label Marko Nieminen

12. Esimerkki (Amulet): Liitetään toiminto komponenttiin vscroll = Am_Vertical_Scroll_Bar.Create() .Set(Am_LEFT, 450) .Set(Am_TOP, 80) ; vscroll.Get(Am_COMMAND) .Set(Am_DO_METHOD, my_do) .Set(Am_UNDO_METHOD, my_undo) ; Normally, the command objects should be parts of the widgets, so that if an instance is made of the widget, an instance will also be made of the command object. However, the widgets will still work if the command is just Set into the Am_COMMAND slot: vscroll.Set_Part(Am_COMMAND, my_command); //command objects should be parts Marko Nieminen

13. Am_TOP, Am_LEFT: As with all graphical objects, these slots describe the location of the widget, in coordinates relative to the object's parent's location. Default values are 0 for both top and left. Am_VISIBLE: If this boolean is true, the object is visible; otherwise, it is not drawn on the screen. Default is true. Am_VALUE: The current value computed by the widget. This slot can also be set to change the widget's value. Am_WIDGET_LOOK: The value of this slot tells Amulet how you want your widgets to look when drawn on the screen. Possible values are Am_MOTIF_LOOK, Am_WINDOWS_LOOK, or Am_MACINTOSH_LOOK, or Am_NATIVE_LOOK which is whatever is the current machine. Am_FILL_STYLE: The color of the widget. Acceptable values are any Am_Style, and the default is Am_Amulet_Purple. The only part of the style used is the color of the style. On a black and white screen, a default set of stipples are used to make sure the widgets are visible. Unfortunately, you cannot set the style for the text labels shown in widgets, but the system picks either black or white text based on how dark the Am_FILL_STYLE is. Am_ACTIVE_2: This slot turns off interaction with the widget without turning it grey. This is mainly aimed at interactive tools like Interface Builders that want to allow users to select and move widgets around. It might also be useful in a multi-user situation where users who do not have the ``floor'' should not have their widgets responding. For a widget to operate, both Am_ACTIVE_2 and Am_ACTIVE must be true. The default value is true. Amulet Slots; komponentin ominaisuudet(tässä vain yleisimmät yhteiset ominaisuudet) Marko Nieminen

14. Am_ACTIVE: This slot in the command is used to determine whether the widget is enabled or not (greyed out). Often, this slot will contain a formula dependent on some system state. The default value is true. (Actually, the widget itself also contains an Am_ACTIVE slot, but this one should not normally be used. The widget-level slot contains a constraint that depends on the Am_ACTIVE slot of the command object part of the widget.) Am_VALUE: This slot is set to the current value of the widget. Do not set this slot in the command object to try to change the widget's value (see the Am_VALUE of the widget instead). Am_DO_METHOD: The method to be called when the widget executes. This procedure takes one parameter: the command object. All the various undo, redo and selective methods Am_DEFAULT: for buttons, shows whether this is the default selection by drawing an extra thick border. Be sure to set the Am_ACCELERATOR slot of this command to ``RETURN''. Am_CHECKED_ITEM: for menus and menubars, whether this item has a check mark next to it. Am_IMPLEMENTATION_PARENT: If you want the command to invoke another command, you can set this slot in the widget's command to the other command object. For example, if the widget is the ``OK'' button of a dialog box, the Am_IMPLEMENTATION_PARENT of the OK widget's command might be the command object for the entire dialog box. Then Amulet will correctly know how to handle Undo, and it will call the parent command automatically. Amulet “Command Objects” Marko Nieminen

15. Tcl/Tk -- Tool Command Language • Perusongelma: ohjelmointi on kuitenkin aika vaikeaa • Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksi skriptauskieleksi (http://home.pacbell.net/ouster/; http://tcl.activestate.com/) • Tk on Tcl:n kanssa yhdessä toimiva komponenttikirjasto • Tulkkaava ympäristö -- kirjoitetut käyttöliittymät (ja ohjelmat) toimivat kaikissa niissä ympäristöissä, joihin tulkkiympäristö on olemassa • Aiemmin ei visuaalista kehitysympäristöä (“IDE”); käytössä WISH: “windowing shell”; nyt Visual TCL Marko Nieminen

16. Tcl/Tk-käyttöliittymäesimerkki wm title . "Simple Tcl Example" label .msg -wraplength 3i -justify left -relief sunken -text \ "Hello, World" pack .msg -side top menu .menu -tearoff 0 set m .menu.file menu $m -tearoff 0 .menu add cascade -label "File" \ -menu $m -underline 0 $m add command -label "Exit" -command "destroy ." . configure -menu .menu frame .buttons pack .buttons -side bottom -fill x -pady 2m button .buttons.quit -text OK -command "destroy ." pack .buttons.quit -side left -expand 1 Luodaan käyttöliittymän elementti, jonka tyyppi on “label” Elementin nimi “polkuineen” Ominaisuudet ja toimenpiteet Marko Nieminen

17. aboutBox -laajennus set m .menu.help menu $m -tearoff 0 .menu add cascade -label "Help" -menu $m -underline 0 $m add command -label ”About" -command \ "aboutBox" -accelerator "<F1>" bind . <F1> aboutBox . configure -menu .menu ... proc aboutBox {} { tk_messageBox -icon info -type ok \ -title ”about..." -message \ ”Simple Tcl/Tk User Interface" } Marko Nieminen

18. RAD/IDE-välineet mahdollistavat visuaalisen layout-suunnittelun object MainMenu1: TMainMenu Left = 8 Top = 8 object File1: TMenuItem Caption = '&File' object Exit1: TMenuItem Caption = 'E&xit' end end end object Label1: TLabel Left = 56 Top = 8 Width = 61 Height = 13 Caption = 'Hello, World!' end object Button1: TButton Left = 48 Top = 32 Width = 75 Height = 25 Caption = 'OK' TabOrder = 0 end Marko Nieminen

19. Esimerkki UIDE-kehitysympäristöstä(Borland Delphi) Marko Nieminen

20. LabView(National Instruments) • Visuaalinen käyttöliittymän suunnittelu • Visuaalinen ohjelmointiG-kielellä Marko Nieminen

21. Esimerkki: Lämpötilan lukeminen • We will make a temperature gauge that 'supposedly' reads a voltage source through the DAQ Board. This is because we will emulate the DAQ Board in this example. • It is required to convert a random signal into a temperature value in the Fahrenheit scale. • Place the controls and indicators in the User Interface. • Navigate to the Diagram Window. • Place any required functions into the window. • Using the Wiring tool, wire the functions, the controls, and the indicators together to complete the program. http://www.engr.usask.ca/itlc/labview/docs/section3.2.html Marko Nieminen

22. VI:n tuottaminen G-ohjelmoinnilla Marko Nieminen

23. Käyttöliittymän arviointi- ja kritiikki • Erityisiä välineitä tuotetun käyttöliittymän laadun arviointiin; jopa automatisoidusti • Käyttöliittymän rakenne • näyttöjen ja komponenttien lukumäärät, sijoittelu • siirtymien määrä näkymien välillä • valikkorakenteiden syvyys/laajuus, redundanssi • käytetyt käsitteet, termit • konsistenssi • Ajonaikaiset lokinkerääjät • käyttäjän toiminta, esim. käynnistykset, toimintofrekvenssit, polut • virhetilanteet, aputekstien käyttö Marko Nieminen

24. Arviointityökaluja • Tullis’ Display Analysis Program • “Display complexity metrics” • Merkkipohjaisten näyttöjen analysointiin • Doctor HTML(http://imagiware.com/RxHTML) • selvittää linkit, tarkastaa dokumentin teknisen oikeellisuuden • arvioi dokumentin luettavuutta • WebLogger • Reeder, Pirolli & Card • Kolme tasoa: input, interface, application • Guzdial: Deriving Software Usage Patterns from Log Files • Hilbert, UC Irvine: Extracting Usability Information from User Interface Events Marko Nieminen

25. Visuaalinen suunnittelu... • On tärkeää. • Arvioinnissa kiinnitetään paljon huomiota tähän. • Tästä lisää ensi kerralla... Marko Nieminen