# data[].attributes.body
Activity 1 (Individual):

1. Client A: Prototyping leads to greater user experiences than those that try to plan everything at the very beginning of the project. Prototyping allows us to work through idea issues through trying ideas, testing them and refining them. If they are not an early part of the design process, you will lose the ability to innovate and experiment.

2. Client B: This is just a rough sketch of how your website/app is intended to work. It is more of a map of the project and sort of a visual guide to the website/app's internal structure.

3. Client C: I don't understand your questions. Can you explain yourself?

Activity 2 (Individual)
Link: https://marvelapp.com/30gi6f0

# data[].attributes.headline
Tutorial 6 - UX Terms Explained [Week 7]

# data[].attributes.subject
Tutorial 6 - UX Terms Explained [Week 7]

# data[].attributes.body
1. Draw the sitemap for this app. (Use google apps to select a tool to draw)

2. Draw one user/work flow for this app. (Use google apps to select a tool to draw)

3. Understand the Five Interaction Design Principles

Principle 1: Good ID is Consistent
While differences can draw attention, they can just as easily cause distraction. When users start asking why something looks or works the way it does, it means they're focused on the UI, on the visual design instead of the content, data or experience. When elements, behaviors and styles are consistent across a website, app or system, users able to focus on something, instead of being distracted by the inconsistency design.

Transitions, rollovers, tooltips should behave consistently.
Labels and terms should be the same throughout.
Content and images should have a consistent and stable style.
Source: http://www.givegoodux.com/use-5-principles-interaction-design-supercharge-ui-part-1-5/

Principle 2: Good ID is Visibility
Use standard, commonly accepted UI components which are understood to be interactive. Different text color, 3D and icons all invite interaction. Indicate when more content is available with commonly accepted control icons. Use adaptive or responsive layouts. When users can easily see that an opportunity to interact is available, they’re more likely to use what’s there. By using common UI components that they’re used to seeing across other sites and apps and systems allows them to reasonably predict what the result of that interaction will be — which gives them the confidence and encourages them to act.
Source:http://www.givegoodux.com/visibility-5-principles-interaction-design-supercharge-ui-2-5/

Principle 3: Good ID is Learnability

We learn behaviors from our experiences across the web, devices and real-world places and objects.

The learnability of a product can be measured int he following ways:

1. Effectiveness: The number of functions learned, or the percentage of users who successfully learn and use the product.

2. Efficiency: The time it takes someone to learn (or re-learn) how to use a product, and their efficiency in doing so.

3. Satisfaction: The perceived value the person associates with their investment (time, effort, cost) in learning how to use the product.

4. Errors: The number of errors made, the ability to recover from those errors and the time it takes to do so.

The learnability of a design is based on comprehensibility: if you can't understand it, you can't learn it.
Source: http://www.givegoodux.com/learnability-5-principles-interaction-design-supercharge-ui-3-5/

Principle 4: Good ID is Predictable
"If you can accurately predict what’s going to happen in an interaction, it’s because the action you’re taking is understandable, clear, logical, and makes you feel confident.” - Robert Hoekman, Jr.

When we don't know what to do or what can we do, we'll attempt interaction with anything on the screen. When we know what we can do and what will happen, we only interact with what's necessary to complete our task. Show what can be done while the interface loads.

Delivering a predictable, positive experience improves your chances of successfully matching the user’s expectations. When what happens on the screen matches what they expect, they’re more confident, comfortable and happy. Which means they’ll keep visiting and using what you’ve designed.
Source: http://www.givegoodux.com/predictability-5-principles-of-interaction-design-to-supercharge-your-ui-4-of-5/

Principle 5: Good ID provides Feedback.
Every action should produce a visible, understandable and immediate reaction. Feedback should be prompt, meaningful and perceivable so that users know their actions were detected. Feedback should always simplify and support the user’s experience, instead of complicating it.
The simple act of using the correct visual form for controls (e.g. buttons that look like buttons, underlined text hyperlinks) provides immediate visual feedback. Above all else, feedback is important because it provides answers to the questions the human brain is designed to instinctively ask:

How do I get started?

Should I click that?

Is that work saved?

Am I almost finished?

Why is this taking so long?

Should I cancel this, or wait a little longer?

Is it doing anything, or is it stuck?

Source: http://www.givegoodux.com/feedback-5-principles-interaction-design-supercharge-ui-5-5/

# data[].attributes.body
Craft and sketch out a journey map of your persona.

# data[].attributes.headline
Tutorial 3 - Heuristics Evaluation (Activity 2)

# data[].attributes.subject
Tutorial 3 - Heuristics Evaluation (Activity 2)

# data[].attributes.body
Activity on Heuristics evaluation:

Based on the 10 usability heuristics according to Jakob Nielson, and the article you have read, list out the diagnostic tools and methods you would use to accomplish your task of competitor and current website’s analysis.

- Aesthetic Minimalist Design : excess visual clutter
- Match between System and Word: the person icon - ambiguity
- Error Prevention: prevent spelling errors through auto-correct

Error Prevention

Consistency and Standards

Aesthetic and Minimalist Design

Help and Documentation

Help users recognize, diagnose, and recover from errors

Flexibility and efficiency of use

Match between System and Word

Match between system and the real world:
The system should speak the user's language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Consistency and standards:
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention:
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Flexibility and efficiency of use:
Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design:
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors:
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation:
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

# data[].attributes.headline
Tutorial 3 - Heuristics Evaluation (Activity 1)

# data[].attributes.subject
Tutorial 3 - Heuristics Evaluation (Activity 1)

# data[].attributes.body
Activity for Preparation for User Interviews:

1. Discuss in your group the type of interview you will conduct, what tools you will use, what you want to get from the interview.

Type of Interview:

Ethnographic interview/Contextual Inquiry as we will personally head down to the actual store to interview the users that are customers in the store.

Tools to use:

Phone Voice Recorder, iCloud Notepad and Google Surveys

Objectives/Goals of the Interview:

To ensure we are targeting the correct customers for the application
To get feedback regarding the website in order to improve the usability, functionality and design of the website
To gain the target customer's needs, goals, motivation and pain points

# data[].attributes.headline
Tutorial 2 - User Research & Persona (Activity 1)

# data[].attributes.subject
Tutorial 2 - User Research & Persona (Activity 1)

# data[].attributes.body
Identify one app that you use getting information/updating information online that you would not be able to perform on a website. From this app, list the category, features, what functions do you use and why, what you like about it as compared to other competitors.

App Name: SG BUSES
1. List the category

Travel, Navigation, Transport
2. Features
● Get estimated bus arrival time for the next and subsequent bus
● Display information about bus capacity, including availability of seats and standing space.
● Display estimated bus location on the route and map.
● Find buses at your nearest bus stops
● Save frequently used bus services
● Search and browse bus service information by road names, stop names, bus stop ID and service number.
3. Functions You Use
I use the app to check my bus arrival time to gauge what time I should leave the house.
4. Competitors

SBS Transit Iris. I prefer to use SG Buses app than the SBS Transit Iris as SBS Transit Iris only allow me to check SBS bus timings whereas SG Buses allow me to check not only SBS buses but SMRT buses.

# data[].attributes.headline
Tutorial 1 - Interaction Design (Activity 4)

# data[].attributes.subject
Tutorial 1 - Interaction Design (Activity 4)

# data[].attributes.body
What are the new consumers expectations?

They expect something to be what they want, when and where they want it.
from https://www.youtube.com/watch?v=pRaivgVBCB4

What is on-demand economy?

Mobile applications are disrupting traditional industries by offering a range of on-demand services at the touch of a smartphone button. For example, uber - taxi hailing application.
from https://www.youtube.com/watch?v=ux7GFEp1Xik

What are the industry that have been disrupted?

Food Delivery - using drones (eg; deliveroo)
Transport - taxi booking (eg; uber, grab)
Services - laundry using mobile application
Laundry and food delivery now uses drones to deliver instead of hiring man.
from https://www.youtube.com/watch?v=BkVTSzZTn0s

# data[].attributes.headline
Tutorial 1 - Interaction Design (Activity 2)

# data[].attributes.subject
Tutorial 1 - Interaction Design (Activity 2)

# data[].attributes.body
What is the interaction design process that you should adopt in embarking on a mobile application project?

The interaction design process that I should adopt in embarking on a mobile application project: definition, research, ideation, design, prototyping, observation, and iteration as needed.

We must define the project, the product, and the design task at hand, and understand what we are trying to solve or achieve.

Then we begin our research. We need to gather data to help us, define the product or the problem, generate ideas and potential solutions, inform our designs and prototypes, and guide our iterations. We use data to form the foundation of our final product, and our initial research gives us direction,.

Once we understand the problem, we need to generate possible solutions through ideation. We think, collaborate, sketch, ponder, wonder, dream, and draw. We generate many possibilities, select a few, and pursue only the best.

In design and prototyping, we create models of our possible solutions to test them, ensure they are complete, and that they help people solve problems, complete tasks, and achieve goals.

We take the time to think through the steps of the interactions, to consider the presentation of the information, and to validate the purpose and value of the product.

No design is perfect the first time it is drawn or modeled. That's where iteration comes in. No matter how carefully we try to consider the needs and perspective of others, we can't anticipate everything. We're not designing for ourselves, and when we observe others interact with our designs and prototypes, we inevitably find opportunities to improve the design, and so we iterate, evolving the design as we gather data, making it better with each round until it is ready. Iteration is more than just refining the design. It also includes monitoring the performance, usability, accessibility, and the success of a product after it's been released. We gather data, speak with and observe users, gather usage and error data, and look for opportunities to modify, improve, and enhance that product.

from http://www.lynda.com/Dreamweaver-tutorials/Understanding-interaction-design-process/82822/97971-4.html

# data[].attributes.headline
Tutorial 1 - Interaction Design (Activity 1)

# data[].attributes.subject
Tutorial 1 - Interaction Design (Activity 1)

# data[].attributes.body
Definition

Interaction design is more than just pop-ups, transitions and animations. Interaction design is a complex and wide ranging field that covers nearly all aspects of human cognition, emotion and behaviour. Interaction design focuses on creating engaging interactive experiences between people and devices to create meaningful relationships between them. Interaction design is about designing the entire interconnected system: the device, the interface, the context, the environment and the people. Interaction design is not just about the interface but also about the behaviour of people.

from https://www.lynda.com/Dreamweaver-tutorials/What-interaction-design/82822/97968-4.html

How is it different from information architecture, product design and visual design?

Information Architecture tells how the the information is architectectured or arranged or designed on any application. It shows the directions for a user to reach to a specific location containing the info user is looking for. (Navigation, Controls, Signs) On the other hand, Interaction Design deals with user actions leading to certain reactions from the device that they are working on to complete a specific task or achieve a certain goal.

Examples:

1. Information Architecture: layout, navigation, wayfinding, search systems, labelling

2. Interaction Design: touch screens, voice activations, audio help

from https://ux.stackexchange.com/questions/61306/whats-the-difference-between-information-architecture-and-interaction-design