User Interface Design and Development Lecture 1 – Monday 29 th January 2018

Course Objectives By the end of this course, students will have proper knowledge on  Why User interface is crucial in designing  Graphical and Web design User interface development  The Interface design life cycle  Principles of good design  UML and why it is important in UID  Proper window selection, interaction devices and testing interfaces  Use of graphical application tools use: VB, Sysbase Power builder, Netbeans IDE  Small devices interface development: Introduction to J2ME and Android

Course Outline  The importance of User Interface  Graphical and Web User Interfaces  User Interface design Process and principles  Modelling – UML(Class diagrams, Use cases, activity diagrams, state diagrams, e.t.c)  Principles of good interface and screen design  Design tools Use (Visual Basic, Macromedia Fireworks, GUI design Viewer)  Mobile devices interface development  PROJECT

Reference Materials and Books  Wilbert O. G, (2007) The Essential Design to User Interface Design: An Introduction to GUI design principles and techniques, 3 rd Edition  Stone D, Carolline J, Mark W, Shailey M, User Interface design and Evaluation  Check out for best User Interface on the internet.

What is a User Interface?  User interface design is a subset of a field of study called human-computer interaction (HCI).  HCI is the study, planning and design of how people interact with computers  User Interface is the basic format allowing a user to operate a program  Command Line (CLI) is text-based  Graphical User Interface (GUI) relies on pictures  Both user interfaces can be applied to any field requiring computational knowledge  But when?

What is a User Interface  The user interface has essentially two components: input and output.  Input is how a person communicates his or her needsor desires to the computer. Some common input components are the keyboard, mouse,trackball, one’s finger (for touch-sensitive screens), and one’s voice (for spoken instructions).  Output is how the computer conveys the results of its computations and requirements to the user e.g Screen,

UI Components  Most common GUI configuration  WIMP – window, icon, mouse, pointer  CLI configurations can vary  Scripts  Text User Interface (TUI) – looks like graphic, but comprised of text characters  GUI: looks nice, familiar, easier to use for beginners, BUT! Can be too simple for experienced users, requires a lot more processing power and memory  CLI: Requires less computing power, runs faster on less processing power, BUT! too difficult for less computer literate users! Also not as pretty.

Design Principles  Know your users!  Needs and goals  Special professional jargon  Computer literacy – level of users  Emulate a familiar system - Using a setup similar to one that is commonplace helps users perform tasks better. E.g. To delete a desktop item in Windows, you drag it into the Recycle Bin, much like throwing a paper memo into the trash can.  Nobody loves an ugly GUI

Human-Computer Interaction  Study of interactions between computers and people  Interdisciplinary field draws from informatics, psych, cog. sci., comp. sci., etc.  Clear understanding of HCI improves user- friendliness

Clinical Contexts  Identify need  Clinical, administration, research  A precise definition of the problem  Tech solution is unacceptable if it misses the point  Technology addresses the need  Development driven by technology often fails  To do or not to do? Estimate costs and benefits

Buy It? Develop It?  Off-the-shelf software  Less expensive  Expensive to customize  If it works well enough, BUY it!  Custom development  Expensive  Can we actually do this?  If it ain’t broke, don’t fix it

When Things Go Awry  If the user is not comfortable with the interface, he/she will give up  Mistakes can be ¢o$t£y  Why don’t these things work? Why are some systems not adopted? - Critical information doesn’t exist - Health professional don’t know how to apply the information - Poorly organized system - Technology simply is not available at this time – imperfect translation of results

How to Make It All Better  User involvement  Model user habits indirectly  Direct user involvement better, but complicated  Medical information specialists  Mediate between users and software developers

How to Make It All Better (con’d)  User testing – involves four areas, Time on task, Accuracy, Recall  Prototyping  Spiral model  Evaluation

Next Time Project Discussion  Key non-negotiable issue  participation of real users outside the project design team  prototype, not implement  Timeline and deliverables (on web site)  Project groups(Max 3, roles clearly defined)  Project questions and discussion  Project ideas

THE END