History of MDEC – Towards Citizen Centricity

MDEC Timeline

2005 – Malaysia Government Portal Website Assessment *MGPWA)

2014 – Provider-based evaluation (ProBE) –

2015 – Malalaysia User Satisfaction Evaluation (MUSE)

now – User Engagement ‘ Jom Sembang’  – towards Citizen Centricity

UNEGDI – Customer Satisfaction Rangkking

  1. Performance
  2. functionallity
  3. content
  4. innovation
  5. search
  6. transparency

2014 – Ranking 31

2016 – Ranking 42 (online service index, human capital index)

2020 – Ranking 15

Phases of e-Government

1997 – 1st wave Promote access and connectivity, focusing on developing insfrastructure

2001 – 2nd wave Service online

2007-2015; 3rd wave – transform the enterprise. 3.1. Automation of existing process, 3.2. Transfom business process and organization

2016 – 20202: 4th next generation smart government

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.

Working memory overload

Why cant I remember my precious memory?
Surfing web here and there, playing video games for 8 hours, facebooking and on the phone all the time make information overload —> working memory overload.

Working memory is responsible for:
1. Intake information
2. Will power – focus
3. Treating in your life
4. Taking new information and linking with the information you already know
5. Behavior response based on information
6. How to use information in your life

How to reduce working memory overload? —> Digital information diet
1. Eliminate your facebook, handphone and webpages
2. Read real book – 4 months
3. Find quiet time for self-reflection.
Find quiet time –> to become more clarity in thought, talk without run some tangent —> Nabi Muhammad SAW did this too – Gua Hira’ time.

Time is the comodity – technology will take it if you dont control it.

Find more from here: https://www.youtube.com/watch?v=Z0ztO86ImQg

Cognitive Theory

Multimedia Cognitive Learning Theory (Meyer, 2001), basically – there are three assumptions:

1. 2 separate channel for input – audio + visual
2. Limited to 7 elements
3. Active learning – build connectivity between separate channel

Learn more from https://www.youtube.com/watch?v=sP98_CTjXNo

12 Principles for Multimedia Learning Theory

In the book Multimedia Learning (Cambridge Press, 2001), Richard E. Mayer discusses twelve principles that shape the design and organization of multimedia presentations:
1. Coherence Principle – People learn better when extraneous words, pictures, and sounds are excluded rather than included.
2. Signaling Principle – People learn better when cues that highlight the organization of the essential material are added.
3. Redundancy Principle – People learn better from graphics and narration than from graphics, narration and on-screen text.
4. Spatial Contiguity Principle – People learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.
5. Temporal Contiguity Principle – People learn better when corresponding words and pictures are presented simultaneously rather than successively.
6. Segmenting Principle – People learn better from a multimedia lesson is presented in user-paced segments rather than as a continuous unit.
7. Pre-training Principle – People learn better from a multimedia lesson when they know the names and characteristics of the main concepts.
8. Modality Principle – People learn better from graphics and narration than from animation and on-screen text.
9. Multimedia Principle – People learn better from words and pictures than from words alone.
10. Personalization Principle – People learn better from multimedia lessons when words are in conversational style rather than formal style.
11. Voice Principle – People learn better when the narration in multimedia lessons is spoken in a friendly human voice rather than a machine voice.
12. Image Principle – People do not necessarily learn better from a multimedia lesson when the speaker’s image is added to the screen

https://www.youtube.com/watch?v=0aq2P0DZqEI&t=63s

or here

https://www.youtube.com/watch?v=stJ-MkTgRFs&t=138s

Melati Matamori

Melati Matamori – Bunga ungu dan putih teradun dari satu pokok yang sama. Suci, ikhlas dan nampak sederhana. Harumnya juga lembut dan menenangkan. Adelia Medina dipagi hari bersama melati. Kalau tidak namanya juga ingin mama sunting dari bunga melati – Melati Khaira.