UI and UX topics

1. Software Engineering
WEEK 7
User Interface and User Experience
Sibel Kuzgun Akın

2. User Interface
The user interface is the mechanism through
which a dialog between the program and the
human is established.
“The single biggest problem with
communication is the illusion that it has taken
place.”
George Bernard Shaw

3. Human Computer Interaction
● It is shortly referred as HCI.
● A user wants to perform tasks better, faster, more
efficiently, more accurately or less expensiveley.
But the underlying tasks remain the same and an
HCI must provide the end user with a facile,
natural environment for conducting these tasks:
– Communication tasks
– Dialog tasks
– Cognitive tasks
– Control tasks

4. Task Analysis and Modeling
● Task oriented: List the tasks of the software.
● The tasks humans currently perform must
be understood and then these tasks should
be mapped into a similar set of tasks that
are implemented in the context of HCI.
● Alternative: Object oriented point of view.
● Focus on the objects and interactions
between them in the system.

5. Evolution of UI in time
● Command line
● Simple menu (text based)
● Graphical user interface
– Touch panel screens
● Voice user interfaces (VUI) are used for
speech recognition and synthesising
systems.
● “Shake your phone to get gifts from
Turkcell!”

6. Command and query interface

7. Simple menu interface

8. GUI: Graphical User Interface
● Visual programming, web based programs,
programs for mobile devices
● Point and pick interface. Mouse or touch panel
screens
● Event driven programming
● Different types of information can be displayed
simultaneously, enabling the user to switch
context.
● Pull down menus, dialog boxes, buttons,
graphical icons, etc.

9. User interface elements
Basic elements:
● Edit box
● Listbox - combobox
● Radio button
● Check box
● Button
Advanced elements:
● Date picker
● File picker
● Color picker
● Tree control
● Slider

10. Example: wxDev-C++ UI

11. User friendly UI
● Ease of learning
● Ease of use
– Tip: Strict to the sector standards like File
menu first and Help menu last.
● Error messages and warnings
● Help

12. Error messages and warnings
● The message should describe the problem in
jargon that the user can understand.
● The measure should provide constructive advice
for recovering from the error.
● The message should indicate any consequences
of the error.
● It should be accompanied by an audible or visual
clue: Beep, red color, etc.
● The wording should never place blame on the
user.

13. Help: Man pages

14. Help: Common practice - F1

15. Help: New trends
● PDF files instead of printed user manuals.
● Web sites
– User support forums
– Wiki
– FAQ
– Social documentation: user generated content
● Videos and augmented reality
Further reading:
https://www.linkedin.com/pulse/demise-user-documentation-gladstone-l-samuel-pmp/

16. A/B Testing
● A/B testing (also known as split testing or bucket
testing) is a method of comparing two versions of a
webpage or app against each other to determine
which one performs better.
● AB testing is essentially an experiment where two or
more variants of a page are shown to users at
random, and statistical analysis is used to determine
which variation performs better for a given
conversion goal.
● What is A/B testing?
https://www.youtube.com/watch?v=9zAQw6UhQLs

17. A/B Testing

18. How A/B testing works?
● In an A/B test, you take a webpage or app
screen and modify it to create a second
version of the same page. This change can
be as simple as a single headline or button,
or be a complete redesign of the page.
● Then, half of your traffic is shown the
original version of the page (known as the
control) and half are shown the modified
version of the page (the variation).

19. A/B Testing using a tool

20. Why you should A/B test?
● A/B testing allows individuals, teams, and
companies to make careful changes to their user
experiences while collecting data on the results.
● This allows them to construct hypotheses, and to
learn better why certain elements of their
experiences impact user behavior.
● In another way, they can be proven wrong—their
opinion about the best experience for a given
goal can be proven wrong through an A/B test.

21. A/B Testing Process
● Collect Data:
– Use traffic data to begin with most visited pages.
● Identify Goals:
– The metrics that you are using to determine
whether or not the variation is more successful
than the original version.
● Generate Hypothesis
● Create Variations
● Run Experiment
● https://www.invisionapp.com/blog/ab-testing-beginners-guide/

22. 41 shades of blue
● Google has tested not 2 but 41 shades of
blue to select the blue tone that will be
used in the links of search results.
● http://www.nytimes.com/2009/03/01/business/01marissa.html?
pagewanted=print&_r=0
● “A/B testing can provide value, but it
shouldn’t come at the expense of other
areas of design.”

23. UX: User Experience
● UX is how a user feels when using an
application.
● Good user experience should make users
happy.
● The UX design studies many processes of
a system.

24. UX: User Experience
UX looks at many things:
● Design
● Usability
● Accessibility
● Marketing
● Performance
● Utility

25. UX versus UI
UX
● It is the internal
experience that a
person has as they
interact with every
aspect of a
company’s
products and
services.
UI
● The visual design
of an application.
● It is the series of
screens, pages,
and visual elements
—like buttons and
icons—that you use
to interact with a
device.

26. UX Videos
● What is UX?
https://www.youtube.com/watch?v=-L4gEk7cOfk
● Forty UI/UX design examples
https://www.youtube.com/watch?v=6caUnPRHMGs
● UX Designer – drawing the problem
https://www.youtube.com/watch?v=LskLyDOSfAc&t=28s