UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

Human Computer Interaction (HCI)

Instructor: Ms. Halima Jamil Name: Jawad Hussain

Results: ID: F2019065237

Total: 50 marks

Date: 11.04.2023

“There are no secrets to success. It is the result of preparation, hard work, and learning from failure.”

Assignment No.2
Question 1: Write a short note on following approaches with examples in low Fidelity.
[10 marks]

1. Post-it: post-it notes are a simple and effective way to quickly capture and
organize ideas during the ideation phase. With Post-it notes, you can write down
your thoughts, ideas, and feedback on small pieces of paper, and then easily
rearrange them on a larger surface, such as a wall or a whiteboard. For example,
if you're designing a new website, you might use post-it notes to join down
different page ideas and then organize them into categories based on user flow.

2. Storyboard: A storyboard is a visual representation of the user journey through a

product or service. It's typically made up of a series of sketches or images
arranged in sequence to show how the user will interact with the product. For
example, if you're designing a mobile app, you might create a storyboard to
show the user journey from opening the app to completing a specific task, such
as making a purchase.

3. Wireframe: A wireframe is a low-fidelity design of a user interface that focuses

on the structure and layout of a design without including any visual design
elements. It's typically created using simple shapes and lines to represent the
different elements on a page. For example, if you're designing a new website,
you might use wireframes to plan out the layout of different pages and how the
different elements on the page will be arranged.
 4. Mockup: A mockup is a high-fidelity design that shows what the final product will
look like. It's typically created using visual design elements such as colors,
typography, and images to give a more realistic representation of the final
product. For example, if you're designing a new mobile app, you might create a
mockup to show how the final app will look on a user's phone screen, including
the colors, fonts, and images that will be used in the final design.
Question 2: Develop a prototype based on cards and post-it notes to represent the
structure of the ticket reservation task, incorporating the feedback from the first
evaluation. Show this new prototype to a different set of potential users and get some
more informal feedback.
[10 marks]
Answer:

Now build up a model in view of cards and post-it notes to speak to the structure of the ticket
reservation undertaking, fusing the input from the principal assessment. Demonstrate this new
model to an alternate arrangement of potential clients and get some more casual input.

Using a product-based prototyping device or web writing apparatus build up a product-based

model that consolidates all the criticism you've had up until this point. On the off chance that
you don't have any involvement in utilizing any of these, make a couple of HTML pages to speak
to the fundamental structure of your site.
(i). Show this new prototype to a different set of potential users and get some more
informal feedback?
User 1:

User 2:
Question 3: Consider the web page's detailed design. Design a Mock up the
application's main screen (home page or data entry). Consider the screen layout, use
of colors, navigation audio, animation, etc.
[10 marks]
Question 4: Design screens (login, signup, home, 4 functioning screens) for an
application using Low Fidelity approaches. Name that approaches which you may use.
[10 marks]
Name that approaches which you may use.
Wireframing: Just in Mind is a popular tool for creating wireframes, which are low-fidelity
representations of a user interface. Wireframes can help designers quickly explore different
design options and communicate their ideas to others.
Design screens (login, signup, home, 4 functioning screens) for an application using
Low Fidelity approaches.
Screen 1
Screen 2
Screen 3
Screen 4
Question 5: Use Question No 4 for reference to design software-based prototyping.
Design screens of question no 4 using software-based prototyping. Your design must
follow the Norman’s Design rules [10 marks]
Consider the web page's detailed design. Sketch out the application's main screen (home page or data
entry). Consider the screen layout, use of colors, navigation audio, animation, etc. While doing this, use
the three main questions introduced in Box 8.7 as guidance: Where am I? What's here? Where can I go?
Write one or two sentences explaining your choices, and consider whether the choice is a usability
consideration or a user experience consideration.cin>>a>>b;
obj.area(0.5,a,b);
break;
case 4: exit(0);
}
getch();
}
Output
Function overloading
1.Area of circle
2. Area of rectangle
3. Area of triangle
4.exit
Enter your choice
2
Enter sides of the rectangle
5 5
Are