CSE100: Introductory Software Engineering

1
CSE100 Introductory Software Engineering

• Lecture 7 Interface Design

2
What is a user interface?

• A program that controls a display for the user
  (usually on a computer monitor) and that allows
  the user to interact with the system (Wordnet
  definition)
• The means by which users interact with a system
• The user interface provides means of
• Input - allowing the users to manipulate a system
  
• Output - allowing the system to indicate the
  effects of the users' manipulation
• (Wikipedia definition)

3
What is a user interface?

• The part of a software application that a user
  sees and interacts with.
• (Wiktionary definition)
• The ways in which the product is designed to
  interact with the user in terms of text menus,
  checkboxes, clickable images, drag-and-drop
  approaches.
• (edutols glossary definition)

4
User Interface Design (or UI Engineering)

• The visible manifestation of the structure and
  organization of a product or site employing human
  factors and business rules. The user interface
  helps create hierarchy and understanding of the
  content/features of a site or software product.
• www.usefulstudios.com/InteractionGlossary.aspx

5
Do these systems have good user interface
design?

• http//www.sunderland.ac.uk/
• http//www.channel4.com/bigbrother/index.jsp
• http//en-gb.facebook.com/
• http//www.monsterlabthegame.com/en/
• http//en.wikipedia.org/wiki/Main_Page
• http//www.nhs.uk/Pages/homepage.aspx
• http//www.elvis.com/
• http//www.hellosoursally.com/

6
How did you make your decisions?

• What factors were important to you?
• Do you think they are correct assumptions?

7
Is it about making the interface nice to look at?

• Is it about making it pleasant to use and
  what would that mean?
• The goal of user interface design is to make the
  user's interaction as simple and efficient as
  possible, in terms of accomplishing user goals
• The design of computers,, mobile communications
  devices, software applications and websites with
  the focus on the users experience and
  interaction.
• Often called user-centred design, or user-centric
  design.
• (Derived from Wikipedia)

8
When does it happen?

• User centred design means placing the user at
  the centre of everything you do
• Means they should be involved in every stage of
  the SE process/lifecycle
• Certainly, its part of the specification stage
  requirements, analysis, design
• Design of system means design of
• its functionality and its form
• i.e. its what and its how.

9
What does it involve?

• User analysis working with the users or
  possible users to discover
• What do they want the system to do
• How would they like it to look
• How they would use it in their everyday/work
  lives
• What type of user they are
• Novice, intermediate, expert
• Regular, sporadic, seldom
• etc

10
Who is it for?

• Universal design design for all?
• lowest common denominator?
• one size fits all?
• Configurable?
• Design tailored to a specific audience/group of
  users?
• Bespoke?
• Specific or special needs?
• Standards to conform to?
• e.g. for web, W3C guidelines
• e.g. for security of data
• etc

11

• Here we concentrate on web based system interface
  design but the principles can be applied to any
  system

12
Good Web Design

• Good design isn't just about good looks, and
  nowhere is this truer than in web design. In fact
  it makes sense to think of web design as being
  made up of three major non-technical components
  aesthetic design, information design and
  interface design. If you want to be a great web
  designer it's essential that you have a firm
  grasp of all three.
• http//psdtuts.com/articles/the-3-components-of-go
  od-web-design/more-1503

13
(No Transcript)
14
Consider Culture?

• Do you think that the design of computer system
  interfaces, web site interfaces is different
  around the world?
• Why/Why not?

15
Information Design

• Or Information Architecture
• Its about chunking your stuff (info) and
  organising it in the best way for the user to
  find what they want
• How to accomplish?
• Card Sort activity helps you determine what
  structure the users believe it should have

16
Info Design Models

• http//www.webdesignfromscratch.com/ia-models.php
• All-in-one
• Flat
• Index
• Hub-and-spoke / Daisy
• Strict hierarchy
• Multi-dimensional hierarchy
• Search

17
Navigation Models

• List of contents
• Breadcrumb trail
• Horizontal top bar
• Tabs
• 2-level top (bar or tabs)
• Top and side bars
• Buttons bar with revealed drop-down
• Multiple-level tree nav
• Paging

18
Difference between ID Models and Navigation
Models?

• First is about underlying structure
• 2nd is about the tools you provide the user with
  to find the information

19
Goal oriented design

• http//www.webdesignfromscratch.com/goal-oriented-
  design.php
• This is a useful web site with information on how
  to achieve good goal oriented design
• Using user personas, scenarios, site personas
• User Personas typical individuals in your target
  user base, together with goals and motivations,
• Site Persona represents the site, embodying its
  brand and its goals.

20
Blog Design

• http//www.webdesignerdepot.com/2008/12/13-charact
  eristics-of-outstanding-blog-design/

• Readability
• Useful Sidebars
• Unique
• Comment Design
• Integration of Ads
• Effective, Usable Navigation

• Images in Posts
• Footer Design
• Colour Scheme
• Icons
• High Content
• Subscription Areas
• Social Media Integration

21
Cool Websites(Effective design in practice!)

• Favourite Website Awards
• http//www.thefwa.com/
• http//www.webdesignfromscratch.com/10-best-design
  ed-web-sites.php1

22
Web Design Fundamentals

• Siobhans Web Basics web design old but still
  relevant
• http//osiris.sunderland.ac.uk/cs0sdv/webbasics/w
  eek10/wk10part1.htm
• Function over Form
• Navigability
• Usability speed, interactivity, predictability,
  consistency
• Accessibility

23
6 steps

• Conceptualise the site
• define your goals what do you want to achieve,
  who do you want to reach and what resources are
  available to achieve your goal
• Plan
• outline the site from the very start so you know
  how many pages you are going to need and what
  will be on each one. Gather all of your
  information, graphics etc. before you begin to
  build the pages.
• Design
• break down your information into chunks and then
  arranging them (and your pages) into a coherent
  structure.
• Implement
• Write the code (HTML, CSS, Dreamweaver, Flash,
  PhP etc..)
• Evaluate
• Does the site meet the original specification?
• Maintain
• Maintenance is an ongoing process that
  reimplements the previous five steps during the
  life of the site.

24
Interface tutorial task

• Fill in right hand column, now considering
• Function over Form
• Target Users
• Generality/specificity of users
• Navigability
• Usability speed, interactivity, predictability,
  consistency
• Accessibility
• The other factors weve looked at today

25

• http//www.webdesignerdepot.com/2008/12/pass-or-fa
  il-the-top-30-technology-company-homepages/