A wireframe is a visual representation or a mockup of an interface using only simple shapes. They’re void of any design elements such as colors, fonts or images and they’re used to communicate ideas and represent the layout of a website in the early stages of a project.
They are usually done before the design phase commencement to get the business approval on the structure of the design itself.
It is important that:
- Elements on the page have a good aspect ratio for the content they contain.
- The white-space should give elements room to breathe, and should never be so large that connected elements get lost.
- If the more than one header is shown, the headers adding relevant information should be large, whilst others should be either small (e.g. where the header is mostly implied by the content) or omitted (where the header is completely implied by the content).
- Vertical space is used wisely.
- As a rule of thumb, multi-line text and headers that repeat down the page should be left justified. Lone lines can be centered. With tabular data and forms, the left column can be right justified.
- To Avoid:
- Extraneous lines & ‘chartjunk’
- Unnecessarily repeated elements on the same page.
- Inconsistent layout choices.
- Information of minimal relevance to common tasks.
Blockchain is an example of a distributed public ledger; that is, a shared record system for transactions. It’s been described as “a technology that allows people who don’t know each other to trust a shared record of events”.
The idea is that every party involved in a particular type of transaction holds a copy of the entire ledger; there are no centralized databases. Anyone can enter a transaction onto the system, and at regular intervals these transactions are batched together into “blocks.” The blocks are then formed into “chains” (hence the name) using cryptographic technology that provides high levels of security. The chronological chain of transactional information is created in such a way that each block that is added protects the information in the previous one.
Source: A beginner’s guide to blockchain by Gemalto
Usability Evaluation assesses the extent to which an interactive system is easy and pleasant to use.
- Formative evaluation: when conducted early on in the design process with low fidelity prototypes – this evaluation required the designer to collect the data (e.g. time to complete the task, clicks, etc…).
- Summative evaluation: when conducted with high fidelity prototypes or a near final interface – this evaluation might produce data on how the user interacted with the system (e.g. log data)
- Low fidelity prototypes require testing in a controlled environment (e.g. a lab)
- High Fidelity prototype can be tested in the wild (e.g. the user’s phone or a kiosk)
We will be able to ascertain if the design is efficient by evaluating various task completion measures. These include time to completion of the task, number of clicks, or number of errors while performing a task.
Notice that we can infer learnability and memorability by using some of the same measures I just mentioned.
Learnability refers to how easy it is to complete a task successfully. We can get an objective measure of this by looking at the data for number of clicks to complete a task, or amount of time to complete a task, and then compare these to expert performance.
We can measure amount of time or number of clicks to complete a task over repeated trials to get a measure of memorability.
We also need to have indicators of the subjective user satisfaction while executing the task.
These can be both cognitive or emotional aspects of the task completion. We are going to refer to cognitive measures as those that relate to the mental effort it required to complete the task. For example, were the steps required to complete the task intuitive?
Here’s a sample of the kind of data matrix you might collect after a usability session. This is not exhaustive. It’s just an example.
It’s important to remember that the usability measures we just discussed must be considered in relation to either the values rate using the status quo interface, right, the current practices of the user.
Or if were designing a completely new interaction, we can compare the user’s values to some other objective measures of success. For example, the values that are obtained when the design team, you might consider these people experts, use a novel design.
Advance evaluation techniques are:
- Heuristic Evaluation
- Cognitive walk trough
Once the evaluation data is collected and analyzed, the designer is in a position to iterate on the design. This may lead to another round of alternative designs. It might lead to prototype building and more evaluation. When do you stop? Well, one rule of thumb is that you stop when you have met your design objectives. And this translates to an evaluation cycle that shows that the user can interact with your design in an effortless and enjoyable manner.
To learn more, check on:
Usability Evaluation 101 by Usability.Gov
Interaction Design – Chapter 15 – Usability Evaluation.
WQUsability – More than Easy to use.
Usability 101 – Introduction to Usability – by Nielsen Norman Group
“Teenagers who like to sleep in late need an easy way to eat breakfast on the go because they don’t have time to eat breakfast before leaving their home and yet breakfast is the most important meal of the day.”
First list as many ideas cross your mind
- Healthy smoothie hold the backpack/car/scooter/etc… drinking holder.
- Breakfast bars that attached to the phone arm holder.
- Frozen nutty fruits licorice sticks to be consumed on the go.
- Yogurt easily resealable with a stick attached.
- Granola in a top zip bag easy mixer.
Then, remove any physical constraint limiting the flow of ideas.
Eliminating a constraint
The teens consume breakfast by themselves at home.
- Mini muffin sandwiches in a top zip bag for easy sharing.
- Mini sharer plate for bus/car consumption (with friends).
- Music food-box container with the latest hits for impromptu parties.
- Friends-sharing application for a healthy lifestyle (exercise counts, calories counts, track of eating habit).
- VR Breakfast Go app.
Then, make an association with any event related to the target audience.
Make an analogy
If eating breakfast on the go was like having a fun party.
- Bright colorful breakfast food and drinks.
- Carillon type food boxes.
- Friends having breakfast together at each home on rotation.
- Friends bringing breakfast food to share.
- Theme breakfast parties on the go.
Then, go for the maximum.
Teenagers need to eat 10 apples every morning for breakfast to be healthy
- Large apple juice made of 10 apples.
- An apple pie to be eaten daily.
- 10 apple/peanut butters sandwiches.
- A 10 apples waist holder for an easy eat on a go.
- A waist that includes holders for: a. A medium juice cup; B. An apple/peanut butter sandwich; C. an apple pie slice.
Is the writer block still impacting your flow of ideas? Then list those you will never recommend.
Get in the garbage
- Breakfast electronic dispenser in the teen’s room.
- Breakfast’s substitute energy pills.
- Gwyneth Paltrow style daily £400 energy smooth.
- Music cup that activates on drinking.
- Kick-off bed to ensure the teen is not late.
Finally, select the best idea based on well determined criteria.
Most useful idea
Healthy smoothie hold the backpack/car/scooter/etc… drinking holder – it uses existing gadgets, no risk for spilling the content, easy to prepare, fast to consume, full of healthy benefits.
Most Desirable idea
VR Breakfast GO app – apart from encouraging kids having breakfast by sharing their experience online with friends, it could promote a healthier lifestyle by imitation – e.g. advocating walking to school, additional activities, healthy breakfast/lunch/dinner/…
The mini sharer plate for easy consumption with friends – almost every household has a sharer plate, alternately buying one is not expensive. Sharing breakfast with friends should improve the overall experience.
Breakfast bars that attached to the phone arm holder – because it uses the unexplored and hidden functionality of an existing gadget.
Most Sustainable idea
Frozen nutty fruits licorice sticks to be consumed on the go – no waste produced, all are eatable pieces.
Other prototyping techniques that do not fit into the definition of High or Low fidelity categories are:
- Wizard of Oz technique: Used to model/mimic functionality of a product by having a human perform the task usually performed by the computer. The user is unaware that the product is not functional. Usually the “wizard” sits in a back room, observes the user’s actions, and simulates the system’s responses in real-time. For input device testing the “wizard” will typically watch live video feeds from cameras trained on the participant’s hand(s), and simulate the effects of the observed manipulations. Often users are unaware (until after the experiment) that the system was not real.
- Saves time and money when compared to building a functional system.
- Setting the stage time.
- Required multiple well trained people
- The user might then have unrealistic expectations.
Proof of Concept Video Technique: fictional video that shows a “working system” in a variety of scenarios.
Metaphor Technique: is meant to help the user build a relevant mental model of how a new design functions. The metaphor communicates the functionality of the novel design compared to systems that the user already knows and is familiar with.
Low Fidelity Prototypes include:
Sketching – is a free-hand depiction of images related to the final design.
Storyboards – are common way to provide a narrative putting the design into context. It provides an opportunity to see how the user will engage with a given scenario. The below storyboard is from RuoCheng.me.
Card-Based prototype – allows us to see at the sequence of iterations the user might have with the designed interface.
Usability.com/Prototyping – includes an excellent graph by Tracy Lepore visually showing the evolution from sketch to design.
Lo-Fi vs. Hi-Fi Prototyping: how real does the real thing have to be? by Florian N. Egger on telenovo.com.
High-Fidelity vs. Low-Fidelity prototyping in Web Design and App Development – by Kim Doleatto on http://www.atlargeinc.com/
UX Recorder – Good for mobile user testing on iOS
Invision – Free design prototyping tool
Marvel App – Free version – prototyping tool for all type of devices.
Azure – the most used software.