CS3249 (SoC, NUS) User Interface Development 1CS3249 (SoC, NUS)

User Interface Development 11CS3249 (SoC, NUS) User Interface Development

User Interface Development

Leow Wee KhengCS3249 User Interface DevelopmentDepartment of Computer Science, SoC, NUS

CS3249 (SoC, NUS) User Interface Development 2CS3249 (SoC, NUS) 2User Interface Development

User Interface

Hardware + software that let user interact with system.

Different systems have different requirements.

CS3249 (SoC, NUS) User Interface Development 3CS3249 (SoC, NUS) User Interface Development 3CS3249 (SoC, NUS)User Interface Development 3User Interface Development 3CS3249 (SoC, NUS)

User interface can be graphical

CS3249 (SoC, NUS) User Interface Development 4CS3249 (SoC, NUS) User Interface Development 4CS3249 (SoC, NUS)User Interface Development 4User Interface Development 4CS3249 (SoC, NUS)

User interface can be non-graphical

CS3249 (SoC, NUS) User Interface Development 6CS3249 (SoC, NUS) User Interface Development 6CS3249 (SoC, NUS)User Interface Development 6User Interface Development 6CS3249 (SoC, NUS)

Developing good user interface is not easy...

CS3249 (SoC, NUS) User Interface Development 7CS3249 (SoC, NUS) User Interface Development 7CS3249 (SoC, NUS)User Interface Development 7User Interface Development 7CS3249 (SoC, NUS)

As user interface design should not end up (enabled.com)

CS3249 (SoC, NUS) User Interface Development 10CS3249 (SoC, NUS) User Interface Development 10CS3249 (SoC, NUS)User Interface Development 10User Interface Development 10CS3249 (SoC, NUS)

10%

30%

60%

Look-and-Feel Icebergadapted from [IBM92]

Presentation(Look)● visual

representations● aesthetics

Interaction(Feel)● techniques● style

Architecture(Behaviour)● organisation● properties● algorithms

CS3249 (SoC, NUS) User Interface Development 11CS3249 (SoC, NUS) User Interface Development 11CS3249 (SoC, NUS)User Interface Development 11User Interface Development 11CS3249 (SoC, NUS)

Good Looking is Not Enough!

CS3249 (SoC, NUS) User Interface Development 12CS3249 (SoC, NUS) 12User Interface Development

To begin...

Understand your users

User Goals What are they trying to accomplish?

Reduce manual labour? Reduce human errors?Increase productivity? Enhance customers' experience?

User Requirements What do they need to accomplish their goals?

Simpler UI? Smarter system? Better functionality?

CS3249 (SoC, NUS) User Interface Development 13CS3249 (SoC, NUS) 13User Interface Development

Next, design...

Golden Rule of Design

Don't do to others what you don't wish.

CS3249 (SoC, NUS) User Interface Development 15CS3249 (SoC, NUS) User Interface Development 15CS3249 (SoC, NUS)User Interface Development 15User Interface Development 15CS3249 (SoC, NUS)

Golden Rule #1: Place Users in Control Use modes judiciously.

Allow users to use either keyboard or mouse.

Allow users to change focus.

Display descriptive messages and text.

Provide immediate and reversible actions and feedback.

Provide meaningful paths and exits.

Accommodate uses with different skill levels.

Make the user interface transparent.

Allow users to customise the interface.

Allow users to directly manipulate interface objects.

CS3249 (SoC, NUS) User Interface Development 16CS3249 (SoC, NUS) User Interface Development 16CS3249 (SoC, NUS)User Interface Development 16User Interface Development 16CS3249 (SoC, NUS)

Golden Rule #2: Reduce Users' Memory Load Relieve short-rem memory.

Rely on recognition, not recall.

Provide visual cues.

Provide defaults, undo and redo.

Provide interface shortcuts.

Promote an object-action syntax.

Use real-world metaphors.

Use progressive disclosure.

Promote visual clarity.

CS3249 (SoC, NUS) User Interface Development 17CS3249 (SoC, NUS) User Interface Development 17CS3249 (SoC, NUS)User Interface Development 17User Interface Development 17CS3249 (SoC, NUS)

Golden Rule #3: Make the Interface Consistent Sustain the context of users' tasks.

Maintain consistency within and across products.

Keep interaction results the same.

Provide aesthetic appeal and integrity.

Encourage exploration.

CS3249 (SoC, NUS) User Interface Development 18CS3249 (SoC, NUS) 18User Interface Development

Not only UI...

UI development is not only UI programming!

UI has to work seamlessly with back end. System design involves both UI and back end.

Most people know only one thing... Conventional software engineer doesn't know enough of UI.

UI / UX designer doesn't know enough of SE.

Game developer doesn't know enough of software design.

…

Whoever can integrate takes the crown!

CS3249 (SoC, NUS) User Interface Development 19CS3249 (SoC, NUS) 19User Interface Development

Summary

Good UI makes a system usable.

Understand users' goals and requirements.

Apply appropriate UI design principles & guidelines.

Design good system architecture.

Develop well-tested UI programs.

CS3249 (SoC, NUS) User Interface Development 20CS3249 (SoC, NUS) 20User Interface Development

Further Reading

User interface models: [Mend97] chap. 3.

UI design principles: [Mend97] chap 5.

CS3249 (SoC, NUS) User Interface Development 21CS3249 (SoC, NUS) 21User Interface Development

References

IBM Corporation, Object-Oriented Interface Design: IBM Common User Access Guidelines, QUE, 1992.

T. Mandel, The Elements of User Interface Design, Wiley, 1997.