HCI Human computer interaction

1
Lecture

• HCI (Human computer interaction)
• Usability
• Site develop process

2
What is HCI?

• Interaction between a human user and a computer
  system via the medium of an interface.
• HCI aims to achieve more usable systems and more
  satisfied users.

3
HCI - Usability

• Usability is a key concept in HCI.
• Usability is being able to do the things you want
  to, not the things you have to!

4
Why usability?

• Internet are used by a large number of people
  require that Web sites are designed in a way that
  makes it easy for the users to find what they are
  looking for.
• There are miljons of web sites on the Internet,
  so the designer have to focus on the user and
  offer valuable information to attract users.

5
The site development process

• Site definition and planning
• Information architechture
• Site design
• Site construction
• Evaluation

6
1. Site definition and planning

• What are the purpose and goals for the site?
• Is it a Web site that provides a service?
• Are you going to sell products or services?
• Is the information on the site targeted to an
  intrested group?
• Shall you provide a collection of links?
• Who is the target audience for the site? What do
  they want?
• How much does the target group know about the
  topic?
• What kind of pages will attract the target group?

7
Who is the target audience for the site?

• http//www.hm.com/us/start/start/index.jsp
• http//www.jonkoping.se/
• http//www.ryanair.com/

8
2. Information architecture

• Detailed
• site design specifikation
• Make a site structure (see next page)
• description of site content
• Make a list of what things each page should
  contain.
• The list should include text, graphics, sound,
  links etc.
• technical support specification
• Browser technology connection speed supported
• A schedule for implementing the site design and
  construction.

9
Site structure

• Sequences
• Chronological,alphabetical
• Grids
• Good way to correlate variables such as timeline
  and historical information.
• component 1
• component 2
• component 3

A
B
C
D
10
Site structure

• Tree structure
• Complex bodies of information
• Home page
• Webs
• Small sites dominated by links

11
3. Site design

• Create the illustrations, photography and other
  graphic or audiovisual content for the site.
• Research, writing, organizing, assembling and
  editing the site's text content.
• Goal Produce all the content components and
  functional programming.

12
Interface design

• Every Web page needs
• An informative title
• The creators identity (author or institution)
• Creation and revision date
• At least one link to the local homepage
• The home page is the flagship

13
Interface design

• The homepage Memorable and distinct look
• About Us..
• Text must be concise and structured for scanning.
  
• Use headings, list and typographical emphasis.
• Use metaphores that are obvious (easy to
  understand).
• Use the users language
• The webpages should be consistent and
  predictable.

14
Links

• Dont use generic instruction, such as Click
  here as a link name.
• Dont use generic instruction link, such as
  More
• Allow link color to show visited and unvisited.
• Show that things are links by underlining them
  and coloring them blue.

15

• www.amazon.com
• www.cnn.com

16
Graphics and Animation

• Use graphics to show real content, not just to
  decorate your website.
• Dont use animation for the sole purpose of
  drawing attention to an item of the website.

17

• http//www.gap.com/asp/home_gap.html?wdid0
• http//www.bluefly.com/pages/home.jsp?FOLDER3C3E
  folder_id3145349CONTENT3C3Ecnt_id3356991bmUI
  D1065532511020
• www.cnn.com

18
Perception interface design

• Important information shall catch the users
  attention
• Group information
• Structure with colour
• Use short, simple sentences
• The text shouldnt bee to small
• There shouldnt bee to much information om the
  page
• Think about colour combinations!

19
Should be avoided.
White and yellow
Black and darkblue
Black and purple
20
Bra färgkombinationer
21
4. Site construction

• Finished HTML for all Web pages, all page content
  in place
• Finished navigation link structure
• All graphic design in place
• Final proofreading of all site content

22
5. Evaluation

• Dont abandon your website once the production
  goes public.
• A website need constant attention and grooming!

23
If you want to find out more

• Go to http//www.useit.com/alertbox
• This is Jakob Nielsen site, here you can find
  Top ten mistakes in Web Design, Ten good deeds
  in Web Design..and much more!
• Go to http//www.usableweb.com
• This site provide a lot of links to Web pages
  about usability!
• http//www.webstyleguide.com/index.html