T-121.300

KÄYTTÖLIITTYMÄSUUNNITTELU

Luento 7. Graafisten käyttöliittymien kehitysvälineet

Marko NieminenTeknillinen korkeakoulu

Käyttöliittymät ja käytettävyys

Marko.Nieminen@hut.fi

Marko Nieminen

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

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

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

Esimerkkiprogram 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);

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;

Marko Nieminen

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

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

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

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

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_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.

Marko Nieminen

Esimerkki (Amulet): Painikkeen luonti

An instance of Am_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

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

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

Marko Nieminen

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.

Marko Nieminen

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

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 0set m .menu.filemenu $m -tearoff 0.menu add cascade -label "File" \ -menu $m -underline 0$m add command -label "Exit" -command "destroy .". configure -menu .menu

frame .buttonspack .buttons -side bottom -fill x -pady 2mbutton .buttons.quit -text OK -command "destroy ."pack .buttons.quit -side left -expand 1

Luodaankäyttöliittymänelementti, jonkatyyppi on “label”

Elementinnimi “polkuineen”

Ominaisuudetja toimenpiteet

Marko Nieminen

aboutBox -laajennus

set m .menu.helpmenu $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

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 endend

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 = 0end

Marko Nieminen

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

Marko Nieminen

LabView(National Instruments)

Visuaalinen käyttöliittymän suunnittelu Visuaalinen

ohjelmointiG-kielellä

Marko Nieminen

Esimerkki: Lämpötilan lukeminen

http://www.engr.usask.ca/itlc/labview/docs/section3.2.html

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.

Marko Nieminen

VI:n tuottaminen G-ohjelmoinnilla

Marko Nieminen

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

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

Visuaalinen suunnittelu...

On tärkeää. Arvioinnissa kiinnitetään paljon huomiota tähän.

Tästä lisää ensi kerralla...