Graphical User Interfaces .


15 views
Uploaded on:
Description
Graphical User Interfaces. Andy Mayer. References. Ritter, D.J. LabVIEW GUI Essential Techniques. McGraw Hill, 2002. - Quotations from Page 10/11, Page 22 Figure 2-5, and Appendix B Mullet, K. & Sano, D. Designing Visual Interfaces – Communication Oriented Techniques . Prentice Hall, 1995.
Transcripts
Slide 1

Graphical User Interfaces Andy Mayer

Slide 2

References Ritter, D.J. LabVIEW GUI Essential Techniques. McGraw Hill, 2002. - Quotations from Page 10/11, Page 22 Figure 2-5, and Appendix B Mullet, K. & Sano, D. Outlining Visual Interfaces – Communication Oriented Techniques . Prentice Hall, 1995. LabVIEW Style Guide http://www.ni.com/pdf/manuals/321393d.pdf#labview_style_guide

Slide 3

What goes into a GUI [1] The look (10%) Esthetic nature of association and format Color decisions Font decisions Graphic components Overall visual impression Consistency

Slide 4

What goes into a GUI [1] The vibe (30%) GUI question decisions – Does conduct coordinate usefulness GUI question area, closeness – Affect on undertaking stream Access to basic and regularly utilized things Navigation and opportunity of development Appropriate input for every client activity Interface content: catch, menu, and exchange marks and messages

Slide 5

What goes into a GUI [1] Conceptual components (60%) System illustrations Ease of utilization The force of every GUI activity Depth of GUI Flexibility and limit for development and change

Slide 6

The Software Development Process specialists Users Programmers

Slide 7

Successful Software: Avoiding Unpleasantly Surprised Users Early GUI Prototypes User collaboration Watch clients connecting with the program Good comprehension of the use show User purchase in

Slide 8

Evolving User Understanding [1]

Slide 9

How Users Navigate Exploration and divulging process Expected usefulness Analogies to this present reality Forgiveness # snaps to play out an activity

Slide 10

Efficient Interfaces Streamlined outline Simplification Leverage Reduction

Slide 11

The Final Product The developer generally takes a gander at the code The client just takes a gander at the GUI Programmers frequently put moderately little exertion into what the client is really assessing

Slide 12

Helping the User Short term memory Consistency Users will endeavor to add intending to components regardless of whether the software engineer proposed it

Slide 13

Visual Techniques – Use of Color Use of shading 3-5 hues Incremental effect of each extra shading Don\'t do this Don\'t do this Don\'t do this

Slide 14

Visual Techniques - Layout Ratios Grids Templates To outline or not to outline

Slide 15

Alignment Visual weight

Slide 16

An Example before Part 2

Slide 17

GUI Design Checklist [1] The GUI mirrors the client\'s mental model instead of the execution display Program elements and capacities bolster just required client objectives. No pointless components have been included just on the grounds that they are anything but difficult to execute or as a consequence of the individual inclinations of the software engineers

Slide 18

GUI Design Checklist [1] The GUI plan mirrors the normal attributes and capacities of the client populace Visual, physical, and subjective capacities Cultural and specialized foundation Domain encounter Education level Etc..

Slide 19

GUI Design Checklist [1] The GUI outline mirrors any bizarre attributes of the client\'s surroundings Dangerous or risky work territories Excessive commotion Bright or diminish lighting Etc..

Slide 20

GUI Design Checklist [1] The outline is enhanced for human discernment and data preparing capacities Short term memory contemplations Recognition over review

Slide 21

GUI Design Checklist [1] All client classes are enough spoken to and the possibly different requirements of client classes are adjusted suitably All GUI things are organized. Basic and every now and again got to things are conspicuous and more effectively gotten to than less imperative things

Slide 22

GUI Design Checklist [1] All superfluous GUI controls and pointers have been wiped out The GUI heirarchy geometry is improved to decrease board mess and to minimize the aggregate number of snaps required to get to every capacity

Slide 23

GUI Design Checklist [1] Panel formats and GUI protest situation sensibly reflect client errands groupings The client is never required to hop between boards or applications to finish a solitary assignment Where conceivable, every single fundamental control for every undertaking are available from a solitary board

Slide 24

GUI Design Checklist [1] The client is not required to physically duplicate data showed on one board into a control on another board. The program consequently exchanges shared data amongst boards and takes out superfluous busywork for clients

Slide 25

GUI Design Checklist [1] Tedious, everyday, and unsurprising assignments are robotized to enhance client proficiency, yet not to the detriment of satisfactory client control Qualified clients are allowed to alter or sidestep robotization as essential

Slide 26

GUI Design Checklist [1] Tool tips, control portrayals, and console easy routes have been incorporated for power clients User activities and errand successions lead normally starting with one then onto the next

Slide 27

GUI Design Checklist [1] The capacity of all GUI things is outwardly clear and all articles including custom controls carry on of course. GUI catches look and react like genuine catches from the physical world and don\'t deliver sudden results

Slide 28

GUI Design Checklist [1] GUI analogies, visual or something else, are characteristic and predictable with their certifiable partners The GUI sticks as important to material models records and all inclusive style guides.

Slide 29

GUI Design Checklist [1] Direct client criticism has been gathered and all outline deficiencies have been (or will be) tended to in consequent iterative cycles. Documentation and help records have been made with similar level of excitement and meticulousness as the product.

Slide 30

GUI Design Checklist [1] Panels show up promptly uncluttered and sorted out. The style and state of mind of the GUI plan are suitable for the application and its normal clients The outline style is steady starting with one board then onto the next, and all board look just as they have a place with similar application.

Slide 31

GUI Design Checklist [1] A predetermined number of exceptional outline components – control and pointer sorts, hues, textual styles, extents, et cetera – are utilized reliably and specifically along these lines making a feeling of utilization wide solidarity Limited shading palettes have been chosen and connected reliably to improve both feel and mental model advancement. Splendid hues are utilized sparingly to pull in the client\'s consideration.

Slide 32

GUI Design Checklist [1] The format of every board makes a visual chain of command, attracting the clients\' eyes to the most imperative things first. GUI things are organized and requested to reflect normal visual examining designs (left to right, through and through in Western societies). Errand arrangements are mapped straightforwardly to the normal checking examples to enhance client efficiency.

Slide 33

GUI Design Checklist [1] Positive and negative space have been utilized adequately to make board plan seem adjusted and uncluttered. GUI content, control names, and menu content is clear, unmistakable and brief. Controls have been assembled to allow the disposal of excess mark content. Blunder messages are brief, useful, and intended to help clients find and conquer challenges. Pointless specialized language has been dispensed with from boards and discourse boxes.

Slide 34

GUI Design Checklist [1] The chose textual style, size, and shading mixes give satisfactory decipherability to clients with basic visual insufficiencies. Where board resizing is allowed, boards have been intended to resize smoothly. Bitmapped representation have been maintained a strategic distance from on resizing boards and the quantity of adornment components have been kept to a base.

Slide 35

GUI Design Checklist [1] GUI boards focused for cross-stage arrangement have been confirmed outwardly on all objective stages. Boards have been intended to give a satisfying visual presentation, yet frame dependably takes after capacity.

Slide 36

Example - old

Slide 37

Example - new

Slide 39

References Ritter, D.J. LabVIEW GUI Essential Techniques. McGraw Hill, 2002. - Quotations from Page 10/11, Page 22 Figure 2-5, and Appendix B Mullet, K. & Sano, D. Planning Visual Interfaces – Communication Oriented Techniques . Prentice Hall, 1995. LabVIEW Style Guide http://www.ni.com/pdf/manuals/321393d.pdf#labview_style_guide

Recommended
View more...