MultiMedia Authoring and GUI/Graphical User Interface (GUI)

From WikiEducator
Jump to: navigation, search


Dummy user.pngIn computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and office equipment .
Dummy user.pngA GUI represents the information and actions available to a user through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. The actions are usually performed through direct manipulation of the graphical elements.
Dummy user.pngWe have to remeber to use Imbedded User Language i.e pictures, language which the user can understand. The Other issues in GUI are Visibility, Affordance, Feedbackand Site / Content Mapping

Dummy user.png Steps of User interface Design

  • Analyse User Activities
  • Design a Paper Prototype and Evaluate with end User
  • Design a Executable Prototype and Evaluate with end User
  • Implement Final user interfcae

Design Issues

  • Design Principle 1: Understand People Applications
  • Design Principle 2: Be Careful of Different Perspectives
  • Design Principle 3: Design for Clarity
  • Design Principle 4: Design for Consistency
  • Design Principle 5: Provide Visual Feedback
  • Design Principle 6: Be Careful With Audible Feedback
  • Design Principle 7: Keep Text Clear
  • Design Principle 8: Do not forget the User
  • Design Principle 9: Do not provide Too Many Features at the Top Level
  • Design Principle 10: Provide Traceable Paths

What’s Behind a Great User Interface? There are many things that go into creating an optimal user interface design. Here’s an overview:

  • User Experience is the first and most strategic step to an optimized user interface design. User Experience conceptualization, planning, and design ensures the site will fulfill your business goals
  • Information Architecture is the nuts and bolts behind the user interface design. The information architecture wireframes are the functional blueprints of the site. Information architecture also includes the careful planning and definition of the site’s navigation, naming conventions and content organization
  • Usability helps to make the site experience as seamless as possible for the visitor to increase site engagement and sales. Usability powers good user interface design by promoting a user-centered design approach that analyzes the ecommerce transaction from the customer’s perspective. The goal is to fulfill the customer’s needs as effortlessly as possible, which benefits both your customers and you!



1.KISS.(Keep it simple stupid) 2.Be Clear and Specific in what an option will achieve: e.g.: use verbs that indicate the action that will follow on a choice (see: Impl. 1). 3.Use obvious default actions appropriate to what the user needs/wants to achieve. 4.Fit the Appearance and Behavior of the UI to the environment/process/audience: stand-alone application, web-page, portable, scientific analysis, flash-game, professionals/children, ... 5.Reduce the learning curve of a new user. 6.Rather than disabling or hiding options, consider giving a helpful message where the user can have alternatives, but only where those alternatives exist. If no alternatives are available, its better to disable the option - which visually then states that the option is not available - do not hide the unavailable options, rather explain in a mouse-over popup why it is disabled. 7.Stay consistent and conform to practices, and placement of controls, as is implemented in widely-used successful applications. 8.Lead the expectations of the user and let your program behave according to those expectations. 9.Stick to the vocabulary and knowledge of the user and do not use programmer/implementation terminology. 10.Follow basic design principles:

  • Contrast(Obviousness), *Repetition(Consistency), *Alignment(Appearance), *Proximity(Grouping).


  1. Windows Vista User Experience Guidelines [1]
  2. Dutch websites - "Drempelvrij" guidelines [2]
  3. Web Content Accessibility Guidelines (WCAG 1.0) [3]
  4. Consistence [4]
  5. Don't make me Think [5]
  6. Be powerful and simple [6]
  7. Gestalt design laws [7]



Welcome to the Course !