Introduction to Graphical User Interface and Interaction Design

What is GUI?

  • a user interface that includes graphical elements, such as windows, icons, and buttons.
  • it started in the 1970s by Xerox Palo Alto research laboratory and deployed commercially in Apple’s Macintosh and Microsoft’s Windows operating systems.
  • as a response to the problem of inefficient usability in early text-based command-line interfaces
    for the average users.
  • the first commercially available GUI was PARC by Xerox
  • Apple’s GUI-based OS was released in 1984
  • Microsoft GUI-based OS, Windows 1.0 was in 1985
  • GUIs before was primarily controlled by mouse and keyboard.
  • in the current times, touchscreen interfaces are used by mobile devices
  • in the current times, spoken commands are also introduced.

*Specialized GUIs that operates using speech recognition and motion detection are called natural
user interfaces, or NUIs

Structural Elements of GUI

  • Windows
  • Menus
  • Icons
  • Widgets
  • Tabs

Interaction Elements of GUI

  • Cursor – A cursor indicates the place where the system will accept input next. It can either be a pointer, which follows the movements of a pointing device—such as a mouse—or a text cursor, which indicates the point of focus in a current text box.
  • Selection – A selection refers to a list of items to which a user will apply an operation. A user will
    select a portion of text for cut, copy and paste operations. Image editing applications allow users to select and modify certain areas of an image by using the magic wand selection or lasso selection tools.

  • Adjustment handle – A handle serves as the indicator of a drag and drop operation. When a user places the pointer on the handle to initiate the drag process, its shape changes to an icon that represents the drag function.
Graphical User Interface and Interaction Design

What is Interaction Design

According to the Interaction Design Association, interaction designers focus on user-centered
design, based on the understanding of real users including their experiences, goals, needs, wants, and tasks. This discipline approaches design from the users’ perspective, but at the same time it
strives to balance the users’ needs with the business’ technological capabilities and goals. And by
doing so, interaction design provides the apt answer for complex design challenges.

What Makes a “Good” Interaction Design?

  • Design must be Goal-Driven
  • It must be Easy to Use
  • The Interface must be Easily Learned
  • Keep an Eye on Signifiers & Affordances
  • What’s the Feedback & Response Time?

What is UX design process?

  • refers to a method of design in which designers create products and services that provide their
    customers with unique, memorable experiences.
  • created in the early ’90s by designer and cognitive psychologist Don Norm
  • UX design process uses customer preferences and perceptions to optimize the user’s
    experience with the products being created.
  • The UX design process is typically used online to attract customers to websites and make the overall buying experience—including the user’s experience navigating the website and finding the information they need—as simple and efficient as possible.

What are the steps in the UX design process?

  • Learn your users
  • Define the problem
  • Brainstorm
  • Create a prototype
  • Test your product

Why companies should use UX design?

❑ Boost revenue
❑ Lowering development costs
❑ Boost engagement rates
❑ Increase customer loyalty
❑ Word-of-mouth advertising
❑ improving users’ quality of life

Web User Interface

❑ A web user interface, or web-based graphical user interface, refers to the interaction between a user and software running on a web server wherein the user interface is the web browser and the web page is downloaded and rendered.
❑ Technologies such as Flash, Java, JavaScript, and Silverlight enable interactions such as drag and drop, playing audio, drawing on the screen, and access to the keyboard and mouse.
❑ Web graphical user interfaces are platform-independent, require no installation or separate
software development, easy to update and monitor due to the nature of not being dependent
upon the user to deploy updates, provides a vibrant UI experience, and are low cost, requiring only Ethernet or WiFi interface connectivity.

Similar Posts

Leave a Reply

Your email address will not be published.