UI/UX Design  Individual Assignment #4

CPSC 331—UI/UX Design 
Individual Assignment #4
Overview
In this assignment, you should begin by going over the prerequisite reading and reviewing the previous
design slides and assignments. You will also want to review the Greenberg “Ten plus ten” supplemental
document (sourced from the Greenberg text). This assignment builds on your previous assignments in
that you will need to put to practice analysis and design of an interface using the design principles we
have covered so far. You will also be using Balsamiq (https://balsamiq.com/wireframes/desktop/) to
create your final design submitted.
Also, the following sections of chapters 3 and 4 of the OPTIONAL Greenberg et al. text (Sketching User
Experiences: The Workbook) may also be helpful in your completion of this assignment:
• In Section 3.2, you will learn how to draw what you see.
• In Section 3.3, you will learn to compose a collection of basic sketch elements.
• In Section 3.4, you will learn to compose “vanilla sketches” that include drawings, annotations,
and notes.
• In Section 3.7, you will learn how to use office supplies to create sketches that are more easily
modifiable.
• In Section 3.9, you will learn how to create photo-realistic sketches by tracing actual photos.
• In Section 4.1, you will learn how to build sequential storyboards.
• In Section 4.2, you will learn how to construct state-transition diagrams.
By having you read/review the above-mentioned sections/prerequisites and practicing the techniques
they describe (additionally or via the previous assignments and in-class activities), this assignment has
the following learning objectives:
• To learn how to draw what you see, as opposed to what you think you see.
• To learn how to compose simple objects out of basic sketch elements.
• To learn how to create basic sketches consisting of drawings, annotations, and notes
• To learn how to create photo-realistic sketches by using the photo tracing technique.
• To practice creating sketches of humanly-usable artifacts
After practicing the above, you should turn your chosen “best” design (or an amalgamation of the best
features from your initial sketches) into a series of Balsamiq wireframes which can then (optionally) be
linked together as an interactive wireframe prototype.
Specific Tasks
1. Using the techniques described in class, including the “ten plus ten” design method, generate
multiple design sketches for the following design challenge described on the next page. Design
sketch iterations will be used to generate your final Balsamiq wireframes. You will submit your only
your final design iteration. See “Handing in your Assignment” at the end of this document for the
specific deliverables you will be submitting.
a. Create initial sketches of your design and pick the “best” design or features from your
designs to create a “final” design.
2
i. Create your final design using Balsamiq wireframes.
b. (optional – This is jumping ahead a little bit to our low fidelity prototyping) You may also
experiment with adding links between elements in your wireframes for an interactive
experience.
2. Your submission must also include a detailed analysis of a) which design principles you used, b) why
you used those specific design principles (i.e., justify your design decisions), and c) annotations and
descriptions clearly identifying where on your design those principles were applied and/or used as
justification for a design decision.
a. In your analysis, be sure to put each concept or principle you apply in bold type. There is
no maximum limit for your analyses, but you must display a varied application of design
principles, e.g., only using affordances and signifiers will not be sufficient for full credit.
b. You should export your Balsamiq wireframes as images to insert into a Word
document for annotation to satisfy this requirement.
3. Note that to fully illustrate your design you will need to have multiple sketches displaying the
interface’s various screens and transitions. That is, your interface will span multiple screens with
different interface layouts depending on the context, e.g., main interface, settings interface, specific
device interface, etc. In Balsamiq, this means that you will have numerous wireframes to illustrate
interactions with your interface.
4. In generating designs, pay particular attention to the design concepts explored in class thus far:
Norman Text
• Affordances
• Signifiers
• Feedback
• Natural Mappings
• Constraints
• Conceptual Model
• Visibility
Additional consideration for:
• Transfer effects
• Gulfs of execution
and evaluation
Johnson text
• Ch. 1: Human perception is biased
– Avoid ambiguity in information displays
– Be consistent
– Understand users’ goals
• Ch. 2: Human perception optimized to see structure
– Gestalt principles
• Ch. 3: Humans seek and use visual structure
– Impose visual structure on information displays
• Ch. 4: Color vision is limited
– Use color redundantly with other cues
– Make sure colors are distinguishable, even for colorblind
• Ch. 5: Peripheral vision is poor
– Use a combination of movement, color, different font to make things stand out in
periphery and optimize visual search
• Ch. 6: Reading is unnatural
– Avoid unfamiliar words, difficult fonts, poorly contrasting backgrounds
– Minimize text in interfaces
3
Design Challenge: Smart Home Manager
Smart devices are becoming more and more prevalent in homes around the world. According to July 2017 research by
Transparency Market Research the global market for home automation is expected to rise to a valuation of US$21.6 bn
by the end of 2020. Even now there are many mainstream smart hubs and modular smart devices already available for
consumer use and there is much debate as to which devices are the ‘best’ (e.g. the Apple HomePod, Amazon Echo, or
Google Home).
Home automation revolves around the connection of
many “smart” devices in and around your home, turning
your home into a “smart home”. A smart home is a house
… consisting of automated, digitized and connected home
assets, electrical services, controls and appliances across
the home components and functions. These run within a
communications network and enable an enhanced
monitoring, comfort, energy conservation, maintenance,
home activities and security of its occupants whereby the
residents/owners have access to the resulting services and
controls via special displays and controllers, which can take
many forms such as built-in wall displays, proprietary
devices, remote controls, various IT devices such as a
computer, tablet or smartphone and/or multiple devices at
the same time.
Source:
https://www.i-scoop.eu/smart-home-home-automation/
What might a single interface for such a smart home look like? How might home residents interact with their house full
of devices digitally connected through that interface? One method might be through a centrally located interface in the
home which provides monitoring and control of all smart devices connected to their home. In this design challenge, you
will design a device to assist users living in a smart home to monitor and control their connected devices. This is the
motivation for a device called The Smart Home Manager.
As the device’s designer, assume that your interface will be a wall-mounted touch screen device. Your job is to design
the layout of and user interface for BOTH the physical wall-mounted device AND its touch screen display while
keeping in mind that the user will expect to be able to connect this device to an unknown (possibly unlimited) number
of “smart” devices located throughout their home.
Here are the specific functional requirements of the device:
• Users must be able set the date, time, and location. Date, time, and location are a vital part of many smart
devices! Many rely on accurate data to provide services and information.
• Users must be able to configure other device settings. It must be possible to configure other device specific
settings, i.e. the smart home manager interface settings. Examples could be (but not limited to) device
network connectivity (wired? wireless?), brightness settings, security, privacy, accessibility settings, etc.
• Users must be able to add and remove connected smart devices. One of the advantages of many smart
devices is the ability to add and remove from the system as desired (i.e., they are not stand-alone devices).
The interface must support adding and removing any compatible smart devices.
• Users must be able to monitor all connected device statuses. As a smart home user, it is expected that all
connected devices should have a status (e.g. connection or other data made available via the connected
device).
• Users must be able to manually control individual devices. Sometimes, a user will want to manually adjust
individual device states. The interface must support interacting with individual device states (which will vary
by device and supported feature set / available device APIs). At a minimum it should support on/off with the
ability to handle more advanced control sets based on device complexity.
• Users must be able to create, modify, and remove automated tasks. A user must be able to input a specific
automated task for any of their connected smart devices. Automated tasks should support (but not be limited
to) time scheduled activation (on/off) as well as support for custom scripts to provide more advanced
automation (e.g. via device APIs).
4
This assignment will be due:
• before the start of class (see Canvas for exact date), submit one final design and analysis to
Canvas. We will have a chance to present some final designs to the class for feedback and
discussion.
Assessment
Your final assignment will be scored on the following four-value scale:
Points Meaning Description
0 Missing Assignment not submitted, or submitted late
5 Incomplete Assignment is incomplete or significantly deficient. Part of the assignment is missing or
contains significant gaps.
8 Satisfactory Assignment is complete but could be improved. Minor and obvious deficiencies exist with
respect to one or more parts of the assignment
10 Exceptional Assignment is complete and acceptable as is. No obvious deficiencies exist. The student has
demonstrated mastery of the material.
• Design shown in sufficient detail to clearly illustrate design principles
• Design addresses all 6 functional requirements (core tasks)
• Design wireframes are annotated where appropriate to highlight important details
and design principles
• Analysis clearly and correctly considers a reasonable variation of relevant design
principles applied to the design
Handing in your Assignment
You should submit the following (2) files (use the add multiple files option in Canvas) as specified
below:
1. Submit your analysis report as a .pdf file through Canvas by the due date (go to the
“Assignments” tab to submit it).
a. Export your wireframes as image files
b. Insert them into a Word document
c. Annotate and add your analysis/justifications/etc. from tasks step 2.
d. Export Word document as PDF for submission.
2. Additionally, submit your Balsamiq project file. This will be a *.bmpr file generated via the File
→ Save or Save As menu option in the Balsamiq desktop application.
a. Make sure to give your project a reasonable file name.
b. Make sure to give your wireframes reasonable names (e.g., Main page, Search results
page, etc.) rather than random/default nonsensical names.