User Experience Part 2 The Process

UX Design Process

  1. Phase 1 – User Studies/Research Design – Discover the user requirements
  2. Phase 2 – User Interface Design
  3. Phase 3 – Interaction Design (Axure RP, Balsmig)

Phase 1 – Discover the user requirements

There are 3 types of requirements:

  1. Business Requirements
  2. Function Requirements
  3. User Requirements

A. Business Requirements

  • Identify Key Stakeholder
  • Understand business requirements
  • Understand project limitation
  • Identify social and cultural practices
  1. Identify key stakeholders
    Stakeholder’s vision & business objectives. Gist of the discovery process – to identify the problems – they wont share their problem. (e.g. ask them recursively, happines index) – e.g. the user, the doctors, the nurse

    1. Observations and shadowing doctors and nurse
    2. Define scenario for the situation – buat gambar kartun will be meaningful
    3. Card Sorting techniques – menu and sub-menu for the health product.
    4. Design – low fidelity (pakai paper prototype)
    5. Develop – cognitive walktrough – think aloud process
      1. Design innovation – a. screen placement, 2. size decrease, 3. sensitivity
    6. Coding Analysis – based on problem identified, code or categorize into group. At least 3 experts people to go through the coding. Here, you can use card sticky notes to categorize the problems discovered
    7. User Requirements
    8. Medium Fidelity prototyping
      1. Low Fidelity – Rich picture, wizard of oz, paper prototyping
      2. High fidelity –
  2. Content analysis
  3. Results, you can use Azure Rapid Prototyping, very useful.
  4.  Deliverables
    1. Create citizen’s life event
    2. Choose simple flow to create wireframe and paper prototyping
    3. Design single screen
    4. Create many screens for navigation
  5. Presentation – to capture life events of the participants, to create low-fidelity prototyping (senang cerita paperwork dulu so that easy to amend when user want to change)

Methods can be used for user studies

  • Netnography – Researcher participated in network to perform research.
  • Passive Observation – Researcher participate as member
  • Active Observation -Researcher participate as speaker and moderator
  • Survery
  • In-situ analysis ‘current-state analysis’framework
  • Intervention actions on UC definition
  • Intervanteion actions on bridging the gap between academics and practitioners
  • HCI / UX – Academics and Practitioners

User Experience Part 1 Introduction

The beauty of User Experience compared to other design is about the UX able to cover Expectation and Emotions from users/business requirements perspectives.

Insted of cognitive and conventional information processing model, UX focus more on Amigdala. According to (LeDuo, 1987) amigdala is the brain component that control of feeling. Talamus —> visual cortex —> motor (to react)

Affordance

‘to give a clue’

Object possibilities for action

Refers to an attribute of an object that allows people to know more about

Affordances. by Mads Soegaard. The concept of anaffordance was coined by the perceptual psychologist James J. Gibson in his seminal book The Ecological Approach to Visual Perception. The concept was introduced to the HCI community by Donald Norman in his book The Psychology of Everyday Things from 1988. Affordance Theory (Gibson) … Summary: Affordance theory states that the world is perceived not only in terms of object shapes and spatial relationships but also in terms of object possibilities for action (affordances) — perception drives. E.g. Loading more than 3 seconds, 53% users will go away

A Persons’ perceptions and responses that result from the use and /or anticipated use of a product, system or service.

  1. Anticipation
  2. Usage
  3. Identification

UX in Digital Development -there is level of

  1. Security & accountability
  2. Functionality
  3. Usability
  4. Pleasureable user interface
  5. Custamizable – personalization
  6. User experience

Design Timeline

1845 – Ergonomics

1940 – Human Factors

1970 – Usability Engineering

1980 – HCI

1990 – Interaction Design

1992 – UX

2000 – Hedonomics (upgrade ergonomics + emotions)

2001 – User centered Design

2004 – Human Computer Interaction in Use  –

2007 – HCI in practice – Process to produce UI

2010 – HCI in Software Development Practice – HCI knowledge and values

2012 – UX Malaysia – value to produce quality digital product

2013 – Experience Design – Jensen (2013)

 

1845 – Ergonomics

1940 – Human Factors

1970 – Usability Engineering

1980 – HCI

1990 – Interaction Design

1992 – UX

2000 – Hedonomics (upgrade ergonomics + emotions)

2001 – User centered Design

2004 – Human Computer Interaction in Use  –

2007 – HCI in practice – Process to produce UI

2010 – HCI in Software Development Practice – HCI knowledge and values

2012 – UX Malaysia – value to produce quality digital product

2013 – Experience Design – Jensen (2013)

User Interface Design

1980s – command line interface

1990 – graphical user interface

2000 – natural user interace

2010 – organic user interface

Rationales for the Big Picture Selection

I got a constructive comment from ICIMU, the reviewer suggests to provide the rationale for visualization selection from custom BI. The rationale will help the potential reader to develop understanding – why such structures was chosen and why they are appropriate to represent the selected data/information or to be used for specific area/context.

The answer is actually I still don’t have any answer/rationale for that. Insya Allah, the comment help me to develop for it.

The big picture  = An Overview concept

  1. Metaphor – I am reading surah Az Zumar this morning, ‘perumpamaan’/metaphor/analogy use repeatitively in Al Quran to help human develop better understanding.
  2. Flow – In Sofware Engineering, workflow is widely used to show the process.
  3. Notion of Overviwe – Hornbaek, 2011
  4. Eppler (2007) Periodic table of visualization
  5. The Big Picture by Mengis and Eppler 2007 – 2012

From Periodic table, there are various field of visualization:

  1. Data Visualization includes standard quantitative formats such as Pie Charts, Area Charts
    or Line Graphs. They are visual representations of quantitative data in schematic form
    (either with or without axes), they are all-purpose, mainly used for getting an overview of
    data.” An example of student work (pie chart and bar chart).
  2. “Information Visualization, such as semantic networks or treemaps, is defined as the use of interactive visual representations of data to amplify cognition. This means that the data is transformed into an image; it is mapped to screen space.
  3. Concept Visualization, like a concept map or a Gantt chart; these are methods to elaborate (mostly) qualitative concepts, ideas, plans, and analyses through the help of rule-guided mapping procedures.
  4. Metaphor Visualization, like metro map or story template are effective and simple templates to convey complex insights. Visual Metaphors fulfill a dual function, first they position information graphically to organize and structure it.” As an example, temple diagram which required the student to extract all components of complexity from the chapter to create a concise summary
  5. Strategy Visualization, like a Strategy Canvas or technology roadmap is defined “as the
    systematic use of complementary visual representations to improve the analysis,
    development, formulation, communication, and implementation of strategies in
    organizations.”
  6.  “Compound Visualization consists of several of the aforementioned formats. They can be
    complex knowledge maps that contain diagrammatic and metaphoric elements,
    conceptual cartoons with quantitative charts, or wall sized info murals. (Note: The
    Periodic table is a Compound Visualization)” 6,7 Figure 6 shows an information
    (timeline) and compound (graphic facilitation) visualization summarizing a chapter of the
    book The Science of Formula 1 Design.