UI UX Module 2 3

1. Mental Models and Conceptual Design
•A mental model is an explanation of
someone’s thought process about how
something works in the real world
•A designer’s mental model is a vision
of how a system works as held by the
designer.
•A user’s mental model is a description
of how the system works, as held by
the user.
•It is the job of conceptual design
(coming up soon) to connect the two

2. Conceptual Design
Conceptual design is where you establish the theme of the product
—in a word, the concept

3. STORYBOARDS
•A storyboard is a sequence of visual “frames” illustrating the
interplay between a user and an envisioned system.
•Storyboards bring the design to life in graphical “clips,” freeze
frame sketches of stories of how people will work with the system.
•A storyboard might be thought of as a “comic-book” style
illustration of a scenario, with actors, screens, interaction, and
dialogue showing sequences of flow from frame to frame.

4. Making Storyboards to Cover All Design Perspectives
From your ideation and sketches, select the most
promising ideas for each of the three perspectives

5. Include things like these in your storyboards:
1. Hand-sketched pictures annotated with a few words
2. All the work practice that is part of the task, not just interaction with
the system, for example, include telephone conversations with agents or
roles outside the system.
3. Sketches of devices and screens
4. Any connections with system internals, for example, flow to and from a
database
5. Physical user actions

6. Importance of Between-Frame Transitions
Through a series of such snapshots, storyboards are used to show the
progression of interaction over time.
Storyboards for design, the dynamics of interaction in transitions are the user
experience lives and the actions between frames should be part of what is
sketched.
We show a transition frame with a user thought bubble explaining the change
between the two adjacent state frames.

7. Design influencing user behavior
Design is a conversation between designers and users about both desired
and undesired usage outcomes.
But user-centered design is grounded in the user’s current behavior, which
is not always optimal. Sometimes, it is desirable to change, or even control,
the user’s behavior.
The idea is to make a design that works best for all users taken together
and for the enterprise at large within the ecological perspective.
There are other ways that interaction design can influence user behavior.
For example, a particular device might change reading habits. The Amazon
Kindle device, because of its mobility and connectedness, makes it possible
for users to access and read their favorite books in many different
environments.

9. MCQ
1.“Conceptual Modelling”.
1. What does conceptual modelling represent?
a) Responsibility
b) Attributes
c) Important relationships between them
d) All of the mentioned
2. What is a mental model?
• An explanation of someone's thought process about how something works
in the real world.
• A physical model of a system.
• A type of user interface design.
• A technical manual for system operation.
3. What is the designer’s mental model also called?
• User's mental model
• System image
• Conceptual model
• Design prototype

10. 4.Why is it important for a designer to have a well-formed mental model
before designing a system?
A) To ensure the system's technical specifications are met.
B) To avoid a poorly focused design and ensure clarity from the start.
C) To speed up the development process.
D) To make the system aesthetically pleasing.
5.According to Johnson and Henderson, what should not be in the system if it
is not in the designer’s mental model?
A) User interface elements
B) User manuals
C) System features that require user awareness
D) Security protocols
6.In which design perspective does the designer’s mental model describe how
a system fits within its work context?
A) Interaction perspective
B) Emotional perspective
C) Ecological perspective
D) Technical perspective
D) The desktop metaphor used in personal computers

11. 7.What can result from a lack of a correct user mental model?
A) Increased system security
B) A system that is faster to use
C) Confusion and inefficiency in using the system
D) Improved system functionality
8.What is the role of conceptual design in relation to mental models?
A) To establish the system's technical architecture
B) To communicate the designer’s mental model to the user
C) To develop the system’s hardware components
D) To create the system's marketing strategy
9.Which of the following best describes the 'knowledge in the head' that users
rely on?
A) Documentation provided by the designer
B) Mental models of other systems and previous experience
C) Information displayed on the screen
D) Feedback messages from the system
10.What is a possible consequence of metaphors breaking down in design?
A) Enhanced user engagement
B) More efficient user interactions
C) User confusion and potential errors
D) Increased system performance

12. Module 3
Design Production
DETAILED DESIGN
•Annotated Wireframes
Annotations are comments. A wireframe is a basic, two-
dimensional visual representation of a web page, app interface, or
product layout.

13. •Visual Design and Visual Comps
A visual designer who has been involved in ideation, sketching,
and conceptual design now produces what we call visual
“comps” meaning variously comprehensive or composite
layout.
A visual comp is a pixel-perfect mockup of the graphical “skin,”
including objects, colors, sizes, shapes, fonts, spacing, and
location, plus visual “assets” for user interface elements.

14. WIREFRAMES

16. How Are Wireframes Used?
Wireframes are used as conversational props to discuss designs and design
alternatives.
A designer can move through a deck of wireframes one slide at a time,
simulating a potential scenario by pretending to click on
interaction widgets on the screen.
Finally, after the design ideas are iterated and agreed upon by relevant
stakeholders, wireframes can be used as interaction design specifications.
The goal here is completeness, to enable a developer to implement the
designs without the need for any interpretation.

17. •How to Build Wireframes?
Wireframes can be built using any drawing or word processing software package
that supports creating and manipulating shapes, such as iWork Pages, Keynote,
Microsoft PowerPoint, or Word.
Many tools and templates for making wireframes are used in combination—
truly an invent-as-you-go approach serving the specific needs of prototyping.
For example, some tools are available to combine the generic-looking
placeholders in wireframes with more detailed mockups of some screens or
parts of screens.
In essence they allow you to add color, graphics, and real fonts, as well as
representations of real content, to the wireframe scaffolding structure.

18. MCQ
1. What is the primary goal of "information architecture" in web design?
• To create visually pleasing layouts.
• To organize and structure content for easy access and navigation.
• To design engaging animations and transitions.
• To optimize website performance.
2. What is the purpose of "wireframing" in web design?
• To create fully functional web pages.
• To design engaging animations and transitions.
• To outline the layout and structure of web pages.
• To optimize website performance.
3. What is the term for the practice of creating a simplified and non-functional
version of a website to test and refine the layout and structure?
• Usability testing
• Prototyping
• Wireframing
• User flow

19. MCQ
4. What is the primary purpose of wireframing in web design?
• To create fully functional web pages.
• To outline the layout and structure of web pages.
• To optimize website performance.
• To design engaging animations and transitions.
5.Which design tool is commonly used for creating wireframes and prototypes in
web design?
• Photoshop
• Sketch
• Microsoft Word
• Excel
6. In web design, what does "microinteractions" refer to?
• Small, subtle design elements that engage users in meaningful ways.
• Large, attention-grabbing animations.
• A design principle that emphasizes consistent interactions.
• The practice of creating fully functional web pages.

20. MCQ
7. What is the term for a simplified and non-functional version of a website used
to test and refine the layout and structure?
• Usability testing
• Mockup
• Wireframe
• User flow