1 / 25

Method of GUI Layout Arrangement along with User Interface Guidelines

Method of GUI Layout Arrangement along with User Interface Guidelines. Junko Shirogane † , Takeaki Fukumoto ‡ , Hajime Iwata* and Yoshiaki Fukazawa ‡ † Tokyo Woman’s Christian University ‡ Waseda University * Kanagawa Institute of Technology. Background.

zuri
Download Presentation

Method of GUI Layout Arrangement along with User Interface Guidelines

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Method of GUI Layout Arrangement along with User Interface Guidelines Junko Shirogane†, TakeakiFukumoto‡, Hajime Iwata* and Yoshiaki Fukazawa‡ † Tokyo Woman’s Christian University ‡ Waseda University * Kanagawa Institute of Technology JCKBSE2010 in Kaunas, Lithuania

  2. Background • Software usability: consistency of GUIs is one of important elements • Consistency of widget arrangement • Consistency of operation feelings, etc. • Software packages are run in several platforms • Windows • Macintosh, etc. To realize, user interface guidelines are used Consistency among software packagesin the platform is required JCKBSE2010 in Kaunas, Lithuania

  3. User interface guidelines(1) • User interface guidelines to create consistent layouts and operations of user interfaces • Windows Vista User Experience Guidelines(Windows guidelines) • Apple Human Interface Guidelines(Mac guidelines) • GNOME Human Interface Guidelines, etc. • Many detailed elements for GUI designs • Usage patterns of size and arrangement of widgets • Usage patterns of text fonts • Usage patterns and design strategies of menus JCKBSE2010 in Kaunas, Lithuania

  4. User interface guidelines(2) Label alignment: left Label alignment: right Arranged based on Windows guidelines Arranged based on Mac guidelines Even if contents are the same, GUIs become quite different according to applying types of guidelines Number of choices: Under seven - radio button Number of choices: Over six - drop down list JCKBSE2010 in Kaunas, Lithuania

  5. Problems of guidelines • Merits • Realization of consistency • A certain level of usability • Merits • Realization of consistency • A certain level of usability Arrange GUI layouts along with guidelines An application for Windows An applicationfor Macintosh Windows guidelines Mac guidelines Problem:Many parts to be modified Problems:Many detailed elements Problem:Many detailed elements Automatically arrange GUI layouts based on target UI guidelines JCKBSE2010 in Kaunas, Lithuania

  6. Strategies of our method Purpose • Source programs of GUIs are generated • Generated GUI layouts are arranged based on user interface guidelines Strategies • Prepare guideline descriptions of the target platform • Analyze source programs • Without arranged layouts • With arranged layouts based on guidelines for another platforms • Generate source programs of GUIs with arranged layouts for target platforms JCKBSE2010 in Kaunas, Lithuania

  7. Features • Reduce costs of GUI development • Automatically apply user interface guidelines to GUIs • Make easy to develop GUIs for several platforms • Possible to newly develop GUIs for several platforms • Possible to modify GUI layouts arranged based on different guidelines Realized only by changing guideline descriptions JCKBSE2010 in Kaunas, Lithuania

  8. System architecture Conditional guidelines Conditional guidelines Arrangement guidelines Arrangement guidelines • Current target GUIs: Java SWT packages Our system Source program analysis Static analysis GUI data before transformation Source programs Dynamic analysis User interface guidelines User interface guidelines GUI data transformation GUI data after transformation Source program generation GUIs applying guidelines JCKBSE2010 in Kaunas, Lithuania

  9. Guideline descriptions(1) • Guidelines are described as two types • Conditional guidelines • Arrangement guidelines • Conditional guidelines • Elements applied to satisfy certain conditions • Examples • Widget size (e.g. height of button widgets should be 20) • Text font (e.g. regular system font should be 13 points) • Widget font (e.g. font of button widgets should be the same as the system font), etc. JCKBSE2010 in Kaunas, Lithuania

  10. Guideline descriptions(2) • Arrangement guidelines • Elements for widget arrangement in a window • Examples • Label widgets (e.g. label widgets should be aligned on the right) • Control widgets (e.g. control widgets should be aligned on the left) • Label distances (e.g. distances between a label and control widget should be 8) JCKBSE2010 in Kaunas, Lithuania

  11. System architecture Conditional guidelines Conditional guidelines Arrangement guidelines Arrangement guidelines Our system Source program analysis Source program analysis Static analysis Static analysis GUI data before transformation GUI data before transformation Source programs Source programs Dynamic analysis Dynamic analysis User interface guidelines User interface guidelines GUI data transformation GUI data after transformation Source program generation GUIs applying guidelines JCKBSE2010 in Kaunas, Lithuania

  12. Initial GUI analysis • To generate arranged GUIs, existing source programs of GUIs (initial GUIs) are used • GUIs without layout arrangement • GUIs with layout arrangement based on other guidelines • Analyzing initial GUIs, data related to GUI layouts are extracted and saved • Static GUI data: extracted by source program analysis • Dynamic GUI data: extracted by partially running initial GUIs GUI data JCKBSE2010 in Kaunas, Lithuania

  13. Source program analysis • Source programs of initial GUIs are statically analyzed • Extract static GUI data Static GUI data Widget types Variable names of widgets Layout managers for windows and panels Text displayed in widgets Widgets arranged by each layout manager Initial selections and groups of radio button widgets Locations of each item in source programs JCKBSE2010 in Kaunas, Lithuania

  14. Example of static GUI data • Type and variable name of widget: Label topLabel • Text displayed on widget: User registration • Type and variable name of widget: (Radio) Button companyRadio, univRadio, etc. • Text displayed on widgets:Company worker, University/Graduate student, etc. • Initial selection and group of radio button widgets:companyRadio (initial), univRadio, highRadio, vocRadio, govRadio, otherRadio • Types and variable names of widgets: (Push) Button okBut • Text displayed on widgets: OK JCKBSE2010 in Kaunas, Lithuania

  15. Partially running initial GUIs • Initial GUIs are partially run • Generate functions of partially running GUIs using static GUI data • Add the functions to the initial GUIs • Extract dynamic GUI data Dynamic GUI data Size of widgets Coordinates of widgets Widget alignment, such as left or right Roles of label widgets, e.g. descriptions for another widgets, descriptions for operations in a window *3. and 4. are extracted by analyzing 1. and 2. JCKBSE2010 in Kaunas, Lithuania

  16. Example of dynamic GUI data • Size: Width - 200, Height - 25 • Coordinates of widgets: (10, 5) • Role of label widgets: window description • Widget alignment (Control): left • Widget alignment (Label): left • Size: Width - 200, Height - 25 • Coordinates of widgets: (115, 105) JCKBSE2010 in Kaunas, Lithuania

  17. System architecture Conditional guidelines Conditional guidelines Arrangement guidelines Arrangement guidelines Our system Source program analysis Source program analysis Static analysis Static analysis GUI data before transformation GUI data before transformation GUI data before transformation Source programs Source programs Dynamic analysis Dynamic analysis User interface guidelines User interface guidelines GUI data transformation GUI data transformation GUI data after transformation GUI data after transformation Source program generation GUIs applying guidelines JCKBSE2010 in Kaunas, Lithuania

  18. GUI data transformation • Transform GUI data of initial GUIs based on target guidelines Example: applying Mac guideline • Font • Before: blue color and 12 points • After: black color, bold and 13 points • Alignment • Before: left • After: right • Widget type • Before: a group of radio button widgets • After: a combo box widget • Location • Before: OK button is on the left of Cancel button • After: OK button is on the right of Cancel button JCKBSE2010 in Kaunas, Lithuania

  19. System architecture Conditional guidelines Conditional guidelines Arrangement guidelines Arrangement guidelines Our system Source program analysis Static analysis GUI data before transformation GUI data before transformation Source programs Source programs Dynamic analysis User interface guidelines User interface guidelines GUI data transformation GUI data transformation GUI data after transformation GUI data after transformation GUI data after transformation Source program generation Source program generation GUIs applying guidelines GUIs applying guidelines JCKBSE2010 in Kaunas, Lithuania

  20. Strategies of applying guidelines • Two types of modification: program modification and comment addition Program modification • Applied when modification strategies are clear • e.g. adjustments to font size, color and label and control widget alignments Source programs of initial GUIs are modified Comment addition • Applied when modification strategies are not clear • e.g. appropriate name or title should be provided to the windows Suggested modifications are inserted into the source programs of the initial GUIs JCKBSE2010 in Kaunas, Lithuania

  21. Example of GUI generation Change to black color,bold and 13 points Change to a combo box widget Switch the location Change to right alignment JCKBSE2010 in Kaunas, Lithuania

  22. Evaluation (Sufficiency)(1) • Evaluate which elements of Mac guidelines are applicable in our method *Elements: the element classification in the guidelines Modifiable: the number of elements of "program modification" Identifiable: the number of elements of "comment addition" Unsatisfied: the number of elements that are not satisfied in our method JCKBSE2010 in Kaunas, Lithuania

  23. Evaluation (Sufficiency)(2) • Two types of "Unsatisfied" elements • Not recognizable whether the elements can be applicable • e.g. Text descriptions should be easily understandable<- Validity of meanings of text cannot be automatically confirmed • Not applicable due to limitation of SWT packages Elements that cannot be satisfied in current technique But... • All of elements that can be applied in currenttechnique were satisfied • Satisfied elements were 55% JCKBSE2010 in Kaunas, Lithuania

  24. Evaluation (Applicability) • Evaluate applicability of our method • Apply Mac guidelines to 3 open source software packages(Sample 1, Sample 2 and Sample 3) *Modified: the number of elements that source programs could be modified Identified: the number of elements that comments could be inserted to source programs All modifications and identifications were appropriate According to two types of evaluations, our method are considered as effective for arranging GUI layouts JCKBSE2010 in Kaunas, Lithuania

  25. Conclusion • Our method: automatically GUI layout arrangement based on UI guidelines • Future works • Satisfy elements that are currently unsatisfied • Arrange GUI layouts to include structures of each window and window switching • Realize an analysis of user defined classes JCKBSE2010 in Kaunas, Lithuania

More Related