ASSIGNMENT NOTES

22 October 2023
13:29

5 Dimensions of Interaction Design

 Empathise: Develop an understanding of your user.

 Define: Describe the problem you want to solve.

 Ideate: Brainstorm potential solutions and select a result.

 Prototype: Develop prototypes of your solution.

 Test: Test your prototype to improve your design.

 PERSONAS

 Segment users by

 Goals, Attitudes (e.g. primary vs. secondary user)

 Behaviours, Abilities (e.g. novice vs. expert user)

 Roles, Responsibilities (e.g. user vs. customer)

 Sources of Secondary Data
 Journal Articles
 Available through
 Google Scholar: https://scholar.google.com/
 UCC library databases: https://libguides.ucc.ie/library
 Association of Information Systems library (AIS) - access instructions
on Canvas
 Company / Competitor information
 Available through
 Company websites
 Market Reports
 White papers
 Resources available through the UCC library
(https://libguides.ucc.ie/az.php)
 Euromonitor Passport
 Business Source Complete
 Nexis
 General newspapers and publications focused on particular sectors
 Individual newspaper websites
 Google News
 Reports
 Governments
  Consulting companies
 Social Media
 Consumer review sites

CITATION REFERENCE:

https://www.scribbr.co.uk/referencing/harvard-style/

PERSONA TEMPLATE

https://xtensio.com/user-persona-template/

A Good Problem Statement

 Human-centred:
 This requires you to frame your problem statement according to specific
users.
 The problem statement should be about the people you are trying to help.
 It should not be focused on technology, financial returns or product
specifications.
 Broad enough for creative freedom:
 It should not focus too narrowly on a specific method regarding the
implementation of the solution.
 It should also not list technical requirements
 Narrow enough to make it manageable:
 Problem statements should have enough constraints to make the project
manageable
 A problem statement such as , “World peace is too broad and will be difficult
to achieve J
 Forward looking:
 A good problem statement is always forward looking. It contains within it
seeds for possibilities.
 Action oriented:
 The problem statement should be actionable. It should include verbs action-
oriented verbs.
 Avoid proposing solutions
 The problem statement should not propose a solution but provide a better
understanding of the problem.

POV(point of view) Statements Examples

 [User . . . (descriptive)] needs [Need . . . (verb)] because [Insight . . . (compelling)]
 Sarah is a 26-year-old student who loves vintage sci-fi books she needs a way to find
older titles because it can be difficult to find them in the library and local book
stores.
 Tom is a 50-year-old father of two who is not very tech savvy, he needs to find travel
information and COVID-19 restrictions because both his children live abroad and he
wants to visit them.
SCAMPER

 Substitute
 What can be replaced (substituted). For example features, process steps, or
people.
 What would happen if we made these substitutions?
 Combine
 What can be combined? For example, other products and services, devices,
roles etc..
 What might happen if we make those combinations?
 Adapt
 How can we change and adapt this product to a different context?
 How can we add new things – features, process steps, etc.
 Modify (also Magnify or Minify)
 How can we modify this (for example, change the size, shape colour or other
attribute)?
 Think about added value?
 Put to another use
  How might we use this product differently (for example, could it be used in
a different context or industry)?
 Eliminate or elaborate
 What could we remove from this product or service to simplify it?
 What could be expanded?
 Reverse (also re-arrange)
 How can we restructure this product or service in order to make it more
efficient?

Crazy 8 – Divergent Thinking

Rich Picture
  You should try to include everything (as much as possible) in the rich picture. This
means you should represent everything learned from both primary and secondary
data.
 Use words, only when you must.
 Place the elements on your sheet wherever your instinct prompts. Don't worry
about the structure.
 If you are unsure where to begin, then follow these steps:
 Look for the elements of structure in the situation (elements that change
relatively slowly over time and are relatively stable, the people, the set-ups,
the command hierarchy, etc.).
 Look for elements of process within the situation (these are the things that
are in a state of change, i.e. the activities that are going on).
 Next identify the ways the structure and the processes interact.
 Try to avoid thinking in systems terms.
For example: the situation is made up of a marketing system and a production system
and a quality control system.
 Include the factual data about the situation and the subjective information.
 Look at the social roles that are regarded within the situation as meaningful by those
involved and look at the kinds of behaviour expected from people in those roles.

Example - Part of a rich picture of a telephone helpline situation

STORYBOARDS

 A storyboard communicates a story through images displayed in a sequence of

panels that chronologically maps the story’s main events.
 The storyboard has three components: a specific scenario, visuals, and captions.
 The storyboard should be linked to a specific persona.
 The persona and scenario should be clear for the reader.
 Ideally a storyboard has between 4 and 7 frames.
 High fidelity drawings are great and you can use tools online to create them.
 However, it can be useful to sketch versions quickly with pen and paper first.
 It can also be useful to create early versions on post-it notes if you are not sure of
the sequence.
  You should have a mixture of shot types in your storyboard

WIREFRAMING
BALSAMIQ/figma

Value proposition
Value statement-one/2lines
Refer lect week7
Wireframe :week 7

ADD ANNOTATIONS TO THE WIREFRAME

Use LATCH framework for organisation
Location
Alphabet
Time
Category
Hierarchy
Use Sitemap to get the layout of the pages and navigation
User flow to know the user decisions
User flow in wireframe. Flow between screens

Navigation less is more

Navigation should be consistent in all pages
Burger menu

Actual heading
Lorem ipsum for contrnt

 Information oragnisation
 Content
 Functionality and controls
 Metadata and annotation

Need user persona

Value statement

Logo,banners,forms, etc
Elements of a basic Wireframe
1. The logo signifies brand identity. It usually sits at the top corner of a page and anchors the
brand's presence.
2. Navigation helps users explore different parts of the site or app. Commonly seen as a menu
bar or sidebar, it directs users to primary sections or features.
3. Search fields allow users to find specific content or features. It's especially useful for content-
heavy sites.
4. Text blocks on a wireframe represent the content placement. It can be headlines, paragraphs,
or bullet points.
5. Buttons prompt users to take actions like "Submit," "Read More," or "Buy Now.“
6. Image placeholders show where you will place your visuals. They help in understanding the
content-to-visual balance on a page.
7. Videos mark the areas on the wireframe where multimedia content, such as videos or
animations, will appear

From
<https://canvadocs-prod-dub.inscloudgate.net/1/sessions/eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJjIjoxNzAxOTAzNjEzN
DIwLCJkIjoiMmRQREhnOWVIS1ZFM29JR3RsS1J1M1p6a29UR2RYIiwiZSI6MTcwMTkzOTYxMywiciI6InBkZmpzIiwibCI6ImVuL
UdCIiwiZyI6Im5vbmUiLCJoIjp7fSwianRpIjoiMzE0ZDgwZmItYjNhMS00NjJjLTliMGQtMmY4NTM5NDc5MTBkIiwidXNlX2Nsb3V
kZnJvbnQiOnRydWUsInNlbmRfdXNhZ2VfbWV0cmljcyI6ZmFsc2UsImlhdCI6MTcwMTkwMzYxMywiZXhwIjoxNzAxOTM5NjEyf
Q.H3INzaFCK_IMFavXOO0n6Nt3OXmFah5GxYfFOfDaog5cgVKOPs9i_KPxS6WpnJhbp3KxDWq5ehm3UykiCWCa3g/view?
theme=dark>

ANNOTATIONS(give clarity while explaining)

• Annotations add clarity to the content of your wireframes
• Annotations tend to fall into the following categories
• Functionality
• Gestures
• Data inputs & outputs
• Content
• Descriptions of copy or, the actual text
• Graphics & multimedia
• Dimensions & resolutions
• Behaviour
• Animations
• Interactions
• Link destinations
• Constraints
• Limitations due to hardware, software, etc.
From
<https://canvadocs-prod-dub.inscloudgate.net/1/sessions/eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJjIjoxNzAxOTAzNjEzN
DIwLCJkIjoiMmRQREhnOWVIS1ZFM29JR3RsS1J1M1p6a29UR2RYIiwiZSI6MTcwMTkzOTYxMywiciI6InBkZmpzIiwibCI6ImVuL
UdCIiwiZyI6Im5vbmUiLCJoIjp7fSwianRpIjoiMzE0ZDgwZmItYjNhMS00NjJjLTliMGQtMmY4NTM5NDc5MTBkIiwidXNlX2Nsb3V
kZnJvbnQiOnRydWUsInNlbmRfdXNhZ2VfbWV0cmljcyI6ZmFsc2UsImlhdCI6MTcwMTkwMzYxMywiZXhwIjoxNzAxOTM5NjEyf
Q.H3INzaFCK_IMFavXOO0n6Nt3OXmFah5GxYfFOfDaog5cgVKOPs9i_KPxS6WpnJhbp3KxDWq5ehm3UykiCWCa3g/view?
theme=dark>