KÄYTTÖLIITTYMÄSUUNNITTELU

Transkriptio

1 T KÄYTTÖLIITTYMÄSUUNNITTELU Luento 4. Graafisten käyttöliittymien kehitysvälineet Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys

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

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

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ä

5 Esimerkki program Generic; {$R TESTWIN} procedure WinMain; var Window: HWnd; Message: TMsg; const WindowClass: TWndClass = ( style: 0; cbclsextra: 0; cbwndextra: 0; hinstance: 0; hicon: 0; hcursor: 0; hbrbackground: 0; lpszmenuname: AppName; lpszclassname: AppName); begin if HPrevInst = 0 then begin WindowClass.hInstance := HInstance; WindowClass.hIcon := LoadIcon(0, idi_applicati WindowClass.hCursor := LoadCursor(0, idc_arrow WindowClass.hbrBackground := GetStockObject(white_Brush); if not RegisterClass(WindowClass) then Halt(25 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;

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

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.

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

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

10 Kehittimet tarjoavat komponenttikirjaston (esim Amulet: widgets, dialogs, command objects ; tässä widgets ) Am_Border_Rectangle: a rectangle with a raised (or lowered) edge, but no interaction. Am_Vertical_Scroll_Bar: scroll bar for choosing a value from a range of values. 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_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_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 startwhen as the right-button to get Windows95 style behaviors. 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.

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

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 ;

13 Amulet Slots; komponentin ominaisuudet (tässä vain yleisimmät yhteiset ominaisuudet) 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 multiuser 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.

14 Amulet Command Objects 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.

15 Tcl/Tk -- Tool Command Language Perusongelma: ohjelmointi on kuitenkin aika vaikeaa Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksi skriptauskieleksi ( 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

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 Luodaan.menu add cascade -label "File" \ käyttöliittymän -menu $m -underline 0 elementti, $m jonka add command Elementin -label "Exit" Ominaisuudet -command "destroy." tyyppi on. configure nimi -menu polkuineen.menu ja toimenpiteet label frame.buttons pack.buttons -side bottom -fill x -pady 2m button.buttons.quit -text OK -command "destroy." pack.buttons.quit -side left -expand 1

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" }

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

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

20 LabView (National Instruments) Visuaalinen käyttöliittymän suunnittelu Visuaalinen ohjelmointi G-kielellä

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.

22 VI:n tuottaminen G-ohjelmoinnilla

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ö

24 Arviointityökaluja Tullis Display Analysis Program Display complexity metrics Merkkipohjaisten näyttöjen analysointiin Doctor HTML ( 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