Develop Designs For User Experience

Develop designs for user experience
Select media/ materials for user experience design
INFORMATION SHEET #1
With User Behavior Psychology to better UX Design
To completely understand the reasons behind what drives users to certain behavior, we need to look at
the psychology of the user himself. We can create the great user experience, only when we understand
the user motivation that guides the action.
“Human behavior flows from three main sources: desire, emotion, and knowledge.” – Plato
As Plato nicely put it all these years ago, the BJ Fogg’s behavior model robustly extends with
environmental influences. BJ Fogg’s model says that for behavior to occur, we need motivation, ability,
and trigger.
So what actually this means? And how are this two famous behavior facts interlinked?
Let’s take for an example simple shopping funnel. Users check out your website, browse its articles and
add one to the basket. After few minutes this visitor leaves the page with no purchase. Where did we go
wrong? And better question is how to motivate this visitor for future purchase?
The user needs to be motivated to buy the product. We see that there is the desire in the user to buy a
product, but there was not enough motivation, ability or correct trigger to complete the purchase.
We can motivate user by numerous ways possible. One of them is to give visitors some discount, simple
reward or heartwarming micro text. The user will be happier hence we satisfied the emotion source of
behavior. We also must make sure that there is correctly aligned trigger to our motivational strategy and
that the user has the needed knowledge of motivational benefits.
As we can see in the above example the two famous behavior facts actually work together. The main
difference is that the Pluto’s behavior sources are more linked to what goes on within users and it’s
primarily deeply connected with user itself. Where BJ Fogg’s behavior model describes these behaviour
sources (desire, emotion, and knowledge) as motivation of user and how they are interlinked with
environmental influences like the ability of the user itself to make the purchase (simplicity of purchase,
financial stability,..) and that the user behavior, can be manipulated with correctly placed triggers on the
website.
How can we use these behavior models to design better UX?
As we understand basic principles of user psychology we can plan UX much better. We can check any
onboarding, shopping or purchase process with the previously mentioned behavior models. When the
user makes something that does not make sense, we reverse-engineer his process path and try to make
multiple scenarios why user behaved the way it has. With behavior model we can find out what was
missing in the process and how can we improve it. The best way to improve user experience is to create
multiple A/B tests with different improvements that will satisfy every scenario and parallel check
conversion of user process on the website. With analytic data of A/B tests, we can then make a much
more rational decision which is based on the real data.
“Users are not always logical, at least not on the surface. To be a great designer you need to look a little
deeper into how people think and act.” — Paul Boag
It’s time to start making rational design choices based on big data and user psychology. The whole point
of the User Experience design is to create as smoothes, warmest and simple process for the user we can.
The user will never forget how you made them feel. And that needs to be the basic fact of UX design.
Guide on the Differences Between UI and UX Design
Increasingly, with the development of technology, more and more people are getting involved in design.
For beginners, it’s important to know the difference between UI and UX design. Having a comprehensive
theoretical understanding about design is the first and necessary step in becoming a UI/UX designer.
What is User Experience Design?
User experience design is the process of building relationships between a company, its products, and its
customers.
User experience design is the process of researching, developing, and improving all aspects of user
interaction with a company’s product to satisfy its users. The goal is to improve the user's experience with
the product through test results, ultimately creating a product that is useful and valuable, as well as easy
to obtain, pleasing to use.
UX design contributes to a product that provides an effective user experience. It includes different
disciplines, such as visual design, interaction design, usability, and more.
What is User Interface Design?
The user interface is the visual appearance of a product, and UI designers decide how to visually design
the product for effective user experience. A good UI design helps attract users and ensures a pleasant
product experience.
The elements of UI design include content such as documents, text, images, videos; forms including
buttons, tags, text fields, checkboxes, drop-down lists, graphic designs; and behaviors like what will
happen when the user's click/drag/enter.
It requires UI designers to have a good sense of aesthetics and technical skill. A creative role, the goal of
the UI designer is to create a compelling, beautiful user interface that elicits an emotional response from
the user.
Simply put, if you first saw a website and marveled at it its visual appeal, it was mainly due to a UI designer.
What’s the Difference Between UI and UX?
UI design and UX design always overlap, but are you really clear about their differences? Simply, UX design
refers to user experience design, and UI design refers to the user interface design. They have a close
relationship in product design but serve different roles.
In terms of functionality, UI is how things look, UX is how things work. UX is a process, while UI is a
deliverable. But people easily confuse the two since they tend to have a symbiotic relationship. As Rahul
Varshney, co-creator of Foster.fm puts it:
“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our
field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is
like the frame of a sculpture with no paper match on it. A great product experience starts with UX followed
by UI. Both are essential for the product’s success.”
So the obvious differences between UI design and UX design result in different roles.
1. Different focus
The most important difference between UI and UX designers is that they have a different use for
prototyping. Many UI designers believe a prototype should be a hi-fi model. However, for the UX designer,
fidelity is an afterthought; they care more about logic. Simply speaking: when you're going to meet your
customers, show them the design made by the UI designer. When you're going to meet the programmers,
take the prototype made by the UX designer.
The reason is really simple too. UI designers pay more attention to the interface- the front end, while UX
designers focus on the back end.
2. The colors they use
UI designers tend to design prototypes in full color. Conversely, UX designers generally use only three
colors in prototype design: black, white and gray.
This difference can be seen commonly in designing and using icons. For example, when you need to create
a bottom navigation bar, UI designers will spend lots of energy making it as realistic as possible, including
the button color before and after clicking. On the contrary, UX designers would insert the button in the
right place, then leave a note: Gray after clicking.
3. The tools they use
Since there are so many differences in the roles between UI and UX designers, the tools they use must be
different. For UI designers, designing images is of prime importance. Hence, tools like Flinto and Principle,
which are bounded to Sketch, have an advantage. InVision is also an option and the team collaboration
function makes it a competitive option.
UX designers will favor a wireframe as it saves time and makes designing more efficient. There are lots of
qualified prototyping tools: Mockplus with its easy and transparent to operate, Balsamiq with sketch style,
and Axure with comprehensive functions. What's more, there's a unique advantage to using Mockplus; it
has 8 ways to test and preview projects. This is especially helpful during testing.
UX is Not UI
“Design is not just what it looks like and feels like. Design is how it works” -SteveJobs
Theoretically, UX design includes wireframing/prototyping, interaction design, and user testing. UI design
includes visual design and interaction design.
Note that both UI design and UX design requires interaction design. Interaction design guides the user’s
feelings and behavior.
If you are confused by the terms mentioned above, have a look at our article UX vs UI vs IA vs IxD to build
up your design thinking.
 UX is not UI, but they do complement each other:

 UX makes interfaces useful, UI makes interfaces beautiful.
 UX helps users accomplish goals, UI makes emotional connections.
 UX design precedes UI design.
 UX design occurs throughout products, interfaces, and services; UI only pertains to interfaces.
What Do UI/UX Designers Do?
The best way to learn what UI/UX designer do is to peruse job descriptions. You can find many real UI/UX
designer job descriptions on recruitment websites.
Career Foundry illustrates the key responsibilities of each position.
UX Designer Skills and Responsibilities
1. Content/Strategy: Customer Analysis, Competitor Analysis, Product Structure/Strategy

2. Prototyping and Wireframing: Prototyping, Testing/Iteration, Development, Planning,
Wireframing
3. Analytics and Execution: Coordination with Developer(s), Coordination with UI Designer(s),
Analysis and Iteration, Tracking Goals and Integration
So, the User Experience Designer is not only responsible for preplanning and preparing the technology
behind the product. They are also responsible for how users interact online and offline, including customer
service and analytics.
UI Designer Skills and Responsibilities
Look and Feel: Branding and Graphic Development, User Guides/Storyline, Customer Analysis, Design
Research
Responsiveness and Interactivity: Adaptation to All Device Screen Sizes, Interactivity, and Animation,
Implementation with Developer, UI Prototyping, Implementation with Developer
UI design creates the skin and appearance of a product. It forms the personality and the brand. It connects
the product to the user, building trust, and transferring of the brand concept. The role of UI designer
requires collaboration with other team members, such as developers and the UX designer.
Responsiveness and Interactivity: Adaptation to All Device Screen Sizes, Interactivity, and Animation,
Implementation with Developer, UI Prototyping, Implementation with Developer
UI design creates the skin and appearance of a product. It forms the personality and the brand. It connects
the product to the user, building trust, and transferring of the brand concept. The role of UI designer
requires collaboration with other team members, such as developers and the UX designer.
What Kind of UI/UX Design Course Should You Take?
For most beginners, taking a course is the best and quickest way of learning how to be a UI/UX designer.
It’s not easy and there is no shortcut.
There are many ways that you can f take a UI/UX design course, with many free or paid options. Free UX
design courses from top universities is a good place to start, but not enough to advance to a career. Lots
of organizations and platforms are now providing good courses and tutorials online. Here are 30 of the
best online course websites to learn UI/UX design summarized by the Mockplus team.
16 Best UX Tools for Designers
User experience (UX) design has become a huge part of working in the design sector. Working at a creative
agency, graphic designers, or any creative at that matter, are most likely expected to have or learn coding
and UX/UI design knowledge as well.
Just look at Audi's recent rebrand for example – that was purely UI and UX based. A new website now
gives anyone access to the design systems of 44 brands with highly regarded identities, including Audi and
the BBC.
UX design is all about providing the user with the information they’re looking for in the easiest, cleanest,
and most intuitive way possible – whether that be a website or mobile app.
In this feature we provide you with a list of the main UX design tools available at the moment to help get
you started – and for some, we've created a list of helpful classes so you can get learning straight away.
If you’ve been a UX designer for a while – or you’re looking to start for the first time – it’s important to
know what tools are available to you, and to get the best tips and advice.
1. Adobe XD
Adobe XD (which stands for experience design) was released only a few years ago, but it's transformed
from beta stages to a fully-fledged UX design tool pretty quickly. As Adobe's offering to UI and UX
designers, you can design websites and mobile apps, prototype and see your finished product in preview
in XD.
You can control and customize your experience, get live feedback to iterate faster and preview on mobile
devices.
Adobe has recently released the latest update to XD too, so now designers can work with third party tools,
and preview XD files in Dropbox.
2. Framer
Framer is an Amsterdam startup company and rival to the likes of Adobe XD and InVision for UX designers.
You can design, draw, animate and share work with Framer – a tool for screen design and interactive
prototyping.
Similar to Adobe XD, you can bring designs into life with pre-made interactions and animations, and share
your ideas with live project previews with the Framer mobile apps.
3. InVision
InVision offers some powerful prototyping tools, allowing you to quickly and easily create interactive
mock-ups of our designs in a way that actually reflects a real web experience. It also offers mobile
prototyping with gestures, and you can also launch user testing from an iPhone, including screen
recordings, videos and audio of users testing your prototypes.
InVision announced in November that its new digital design and UX application will be free for all users.
InVision has released Studio – a rival to XD, Photoshop, Illustrator and Sketch, whatever tool you use to
design apps, sites and other digital products.
You can work on layouts for one screen size or type, and see that design adapted automatically for other
devices and orientations. Libraries of assets can be shared across teams, and updated elements can be
rolled out across designs. And designs can be quickly uploaded to the InVision platform to share with
others in an organisation (or clients).
4. Sketch
Simple, efficient and well loved, Sketch is a very big player in the design world, with some even weaning
themselves off Photoshop completely for it.
As it’s tailored to design gorgeous UX interfaces through quick and easy-to-learn wire-framing tools, some
people believe Sketch is superior to Photoshop when it comes to UX design. Its ability to create different
layers for every new object means you can be more creative with navigation and combinations.
5. Gliffy
Gliffy allows you to create flowcharts, wireframes, UML diagrams, sitemaps and more – and at a low cost,
with no download necessary. It really lets you create any kind of diagram, which can be a great way to
organise your thoughts and ideas, whether you want to share them with developers or just with yourself.
6. OmniGraffle
Stop reading if you own nothing from Apple, as OmniGraffle is specifically for Mac and iOS users - and you
have to buy both versions of the app separately, which ups the cost of the already expensive OmniGraffle
if you want it on two devices.
For this extra cost comes a great, feature-rich way to visually represent ideas, tasks and activities. It is a
powerful diagramming and wireframing tool, but still easy to use.
7. Visio Online
Microsoft’s Visio Online creates diagrams quickly and easily – and can be linked to many other Microsoft
services, such as Excel. You don't need to install anything. This is a quick, cheap option.
Visio’s simple, easy-to-navigate layout offers plenty of shapes, graphics and lines with pre-crafted starter
diagrams and contextual tips and tricks.
8. Axure
With a steeper price comes a more comprehensive wireframing and prototyping service laid out on a
simple drag-and-drop canvas.
Create simple click-through diagrams or highly prototypes with animations, data-driven interactions
without having to write a single line of code. It's also easy to collaborate with a team and share your ideas.
9. Proto.io
For a web app, Proto.io is surprisingly powerful. It has many functions to build mobile apps, but can
therefore be a bit overwhelming to use as everything (everything) works by dragging and dropping. You
can also design in Proto.io or import designs from Sketch or Photoshop, which is pretty handy.
It is easy to share projects with clients, quickly create previews as there is a library of UI elements, and
use multiple screens for a single project, as well as connect between those screens (in other words, it is
not just layer-based, but page-based).
Of course, as a web application, you can only use it with an internet connection (which is not great stuck
in an airport with expensive, or no, wifi). But Proto.io also offers a Proto.io Player app, for both iOS and
Android, to test your prototypes on the actual device they’ll be used on.
10. Photoshop
The great thing about Photoshop for UX is that, well, you probably already have it. You probably know it
well. You probably have a long, rich – and possibly tumultuous – history with it. But is it that suited to UX
design? After all, it was made as a photo editor, not a UX design tool, and many digital design agencies
are making the switch to the likes of Sketch or InVision.
But the good people at Photoshop are looking to the future - and that future is UX - by releasing plenty of
extensions aimed at UX. Adobe's also focussing a lot on XD, so we may suggest looking at that first for UX
design if you still want to stick within Adobe products.
But, with details such as animation, fonts and colour all included, Photoshop is better for the later stages
of UX design - the high quality mock-ups, which is what it's made for and what it's good at.
11. UXPin
You can create responsive, clickable prototypes on your browser, as well as quick-to-create wireframes
and some great options for usability testing with a Pro+ account. You can share prototypes easily with
others and teams can work easily together to create iterations and wireframes in real time.
12. Marvel
Marvel is web-based app (no need to do any downloading) that has a very shallow learning curve. With
an upgraded account, you can make your project a collaborative one. Choose from lots of different
prototype frames, from an Apple Watch to an iPhone 6.
You can create screens directly in Marvel or add images from Sketch or Photoshop for example, and sync
designs from your cloud storage.
All Marvel’s features are simple and easy to use – such as gestures, layering images and user testing. It
also offers a Sketch plugin, which is great if you do lots of app design work in Sketch and want to nick
some of the cool features from Marvel, such as the range of gestures and image layering.
13. UserTesting
It makes some people tick – and others’ eyes roll – but user research really is crucial to the UX design
process (‘user’ is in the name of the thing, after all). And with UserTesting, you get to really see and hear
what users think – and fast, with results promised within an hour.
UserTesting offers videos and metrics of your target audience actually using your website or app – as
UserTesting has access to over a million people.
With its Individual plan, you can create your own tests; its Enterprise plan offers the luxury of UserTesting
handling the tests for you, as well as help from UserTesting’s user research experts.
14. Helio
Helio (used to be Verify) offers tests and raw data, so you can find out key user behaviours. Solve design
problems and avoid costly mistakes by honing in your target audience to see how age, gender, income,
location and education shapes responses to your products.
15. Optimizely
A/B testing tells you what users prefer by testing two options on a pool of users. But it is surprisingly hard
to get right, thanks to interfering factors such as the type of user and time of day.
Across apps and websites, Optimizely handles those fiddly details for you with its comprehensive, well-
reviewed service. For example, you can discover the weather where users are, and then tailor your service.
It is also easy to implement and its code-free visual editor means it is accessible to those less fluent in
coding. Nor does it assume a deep understanding of statistics, with a great results page where you can
track goals.
16. Visual Website Optimizer
Visual Website Optimizer offers A/B testing, multivariate testing and conversion optimization, as well as
analytics, easy-to-access reports and personalization.
It's slightly more suited to beginner A/B testers than Optimizely, which has a slight edge when it comes to
pros as it offers multi-page testing and has more options for running behavioral tests in its Enterprise plan.
Produce mockup of screen flow
Flow Design Processes - Focusing on the Users' Needs
It can be really tempting to start a design project by leaping into the deep end and starting to sketch out
pages and work on the information architecture of the final product. However, it’s almost certainly the
wrong approach to take. To create great user experiences – designers must focus on the user’s needs and
that means developing an understanding of how to create the best task flow for that user. The better you
facilitate the user moving from start to finish on a particular process – the easier the product is to work
with and the more likely that you are to deliver an awesome user experience.
Flow design doesn’t just have to examine user flows – it can also examine other types of flow. However,
UX designers are generally going to be concerned with user flows.
How Do We Design for User Flow?
We begin with the user themselves. Instead of going through the technical specification documents and
trying to base designs on that – we examine what the user’s objective (or objectives) are and what the
business’s objective (or objectives) are.
So for example on a retail website this might include:
 User wants to buy a new product

 User wants to research alternative products
 User wants to return a product
By mapping out all the possible objectives and comparing them to business objectives – it becomes easy
to create user flows. Flows are simply the process steps from the user arriving on a website to completing
their task or tasks.
Once you know what users want to do – you might also want to look at where a user might arrive on your
site and where they are coming from. A user who is responding to e-mail marketing will probably be
delivered to a different place in the site to a user who finds you through organic search.
These define the entry points into task completion funnels (similar to marketing conversion funnels).
The classic conversion funnel is one that nearly everyone in marketing and product design is familiar with.
It tracks the expectation of customers moving through a sales flow.
The Task Completion Funnel
Task completion funnels should be designed for flow from the point of entry to the funnel to the
completion of the task.
This will normally involve:
 Design of the point of entry (Banner Ad, Search Text, E-mail, etc.)
 Design of the landing page (How will you welcome the visitor to the site and get them to begin
the process for which they arrived?)
 Design of the process itself
Considerations for Point of Entry
With each point of entry you may want to consider:
 What user group or groups are we targeting with this point of entry?
 Are they actively looking to get involved with our site or product or are they going to “stumble”
across us?
 Will they be looking to solve a problem and if so what?
 How can we grab their attention and hold it for long enough for them to decide to click through
to the site?
 How can we best relate to the user involved? What messages might work well with these users?
Can we articulate their pain points and a solution simply?
 What are the best calls to action to use to get that click through?
Not every call to action is “buy now!” These are all examples of call to action buttons that you will be
familiar with already. Even if you don’t think of them that way when you see them.
Considerations for Landing Pages
For each landing page you will want to think about:
 How can we create confidence for the user? What benefits should we highlight? How do we keep
the reading burden low whilst still providing enough evidence to reassure the user?
 How do we focus the content on a call to action?
 How can we keep the cognitive friction for the user in this process to a minimum?
Considerations for Process Steps
As the processes which you will want to guide a user through may vary dramatically – it is harder to
provide a concrete list of things to take into account. However, you should focus on:
 How can we minimize steps in the process without over-complicating screens?

 Can we get the process completed and then ask for more information afterwards? If so, how can
incentivize that?
Once you have these flows mapped for each point of entry, landing page and process – you will discover
there are large areas of overlap. At this point you can start to map each task completion funnel to each
other – which will reduce the overall design burden and suggest a useful structure for information
architecture within the finished product.
The simpler and clearer the process – the easier it is for a user to follow. Take the process above and think
about how you could make it simpler for your organization?
The Take Away
Flow design makes designers focus on what users want to get out of interactions with a specific product.
It ensures that user experience takes priority over graphic design or information architecture structuring
and provides a solid framework to move the project forward when visual design and IA are required. Task
completion funnels can be sketched on paper and used to explain user flows to other team members
(such as developers) and are a clear and simple way of showing what the user wants.
User flows are the ultimate representation of user experience. When design works to user flows – it
ensures that users get exactly what they came for.
Hyperlink
Alternatively referred to as a link and web link, a hyperlink is an icon, graphic, or text that links to another
file or object. The World Wide Web is comprised of hyperlinks linking trillions of pages and files to one
another. For example, "Computer Hope home page" is a hyperlink to the main page of Computer Hope.
Why are hyperlinks used on web pages?
Hyperlinks are what allow web pages to connect to other web pages and without them you would need
to know the URL for every page on the Internet.
What happens when you click a hyperlink?
When you click, tap, or select a hyperlink, the browser leaves the current page you are viewing and opens
the link for the new page. For example, you could click on any of the links below to find out more
information related to hyperlinks.
Note
It is also possible to create a hyperlink (named anchor) to a location on the same page.
For example, the links at the beginning of this page are named anchors to the headings
on this page. A link may also open a new tab and keep the current window open as a
background tab.
Tip
On a computer you can identify a hyperlink even if it is not underlined by hovering your
mouse pointer over the text. A browser changes the pointer from an arrow to a finger
to indicate it can be opened. Also, at the bottom of the window the URL of the link
should appear to help you identify where the link points.
Why are some hyperlinks different colors?
For usability, many websites (including Computer Hope) change the color of visited hyperlinks as a way to
let the reader know what page they have already visited. For example, unless you have already viewed
our motherboard page, the link should be blue. However, the link to this hyperlink page should be purple
because you've visited the page since you are reading it now.
Example of how to create a hyperlink
Below is an example of how to create a hyperlink on an HTML page. In our visual example, you can see
that a hyperlink uses the a tag with the href attribute that points to the file or web page. In the example,
the hyperlink would be titled "Computer Hope" and point to the hope.html file. If the file did not exist,
you would get a 404 error.
How can I click a link without using a mouse?
A keyboard can also perform the same action as a click by pressing either the Spacebar key or the Enter
key on the keyboard. For example, you can press the Tab key repeatedly to navigate through each of the
links on this page. When you get to a link you want to "click" and visit, you can press the Enter key to
follow that link.
How to create a hyperlink on an image
In HTML, there are two ways you can create a hyperlink on an image. If you want to link the complete
image, you can place the img tag in the anchor tag. If you want to create a hyperlink in only part of the
image, you would create an image map.
Usability Testing
Interactive prototypes are a great way to implement usability testing into the early stages of software
development. But are you doing it right? Check out the what, how and why of usability testing with high
fidelity prototypes here.
Running usability tests on an interactive prototype can avoid the kind of 11th hour headaches that make
software designers’ and developers’ blood run cold: last-minute reworks, buggy launches and worse, loss
of stakeholder confidence and funds.
But for usability testing to work, it has to be done right. Running tests on interactive prototypes requires
a different approach to testing coded software. This article gives an overview of when, how and why you
should run usability tests on interactive prototypes.
Why Usability test Interactive Prototypes?
Outstanding usability and user experience do not just happen by accident (although it would be
convenient for time-pressed software developers if they did!). To create a product that demonstrates
impeccable UX, usability testing, user scenarios and user requirements have to be incorporated into the
design-development process from the outset. The last thing you want to be doing is fumbling through a
last-minute usability test when your website or app is already coded and waiting to launch.
Prototypes provide early-stage opportunities to check functionality, design, UX, marketing and business
strategy, before coding your final solution. It can be up to 100 times more expensive to change a coded
feature than a prototype, according to Web Usability. And IEEE’s report ‘Why software fails’ points out
that an estimated 50% of rework time could have been avoided had testing been done in the early design
stages. Presenting usability tested and validated prototypes to potential funders can clinch investment
that otherwise may have proved elusive. Some of our clients at Justinmind use a user-validated working
prototype to get stakeholders onboard and to raise funds.
When to Run Usability Tests
There is no one single best time to run usability tests: some propose first-steps testing with paper
prototypes (check out this article for a practical guide on testing with paper-pen prototypes), while others
call for high fidelity prototypes complete with interactions, animations and test-on-device capabilities.
It is also possible, and sometimes desirable, to run multiple rounds of testing as you move through
prototype fidelities. Usability testing at the wireframe stage can ensure testers focus in on the real nuts
and bolts of information architecture and navigation flows, on which you can then iterate up to a high
fidelity prototype and test again.
But this article will focus on usability testing with high fidelity prototypes, which allows you to observe
users trying out complex interactions and tasks, test out solutions for problems you found earlier, and
iron out any last minute glitches.
Prototype-specific Test Factors to Keep in Mind
Disclaimer – prototypes are not the answer to all usability prayers. When you are testing on prototypes,
bear in mind any relevant limitations and, when looking at the data harvested, think about how any
prototype-specific factors might have played a part. For example, if you have included lorem ipsum
placeholder text in your prototype, this may have hampered some users’ navigation abilities; a roughly
mocked up color scheme may lack the intuitive elements that users rely on. Keeping these potential issues
in mind will help you both define your usability tests and understand the results better.
How to Run Usability Tests
Enough with the theory; here is the practical side to running usability tests on high fidelity prototypes.
You will need:
1. Sample users
2. Interactive prototype with test-friendly features
3. A facilitator
4. Observers
1. Sample users
You should have your target user personae up and ready to go. Harvest users from those target groups
with the help of user testing tools or your own resources. The key at this stage is the size of your sample
tests; you might think it is wise to do usability tests on as large a sample as possible at once. The more
users you canvas, the more glitches you will catch, right?
According to usability guru Jakob Nielsen, wrong: “The best results come from testing no more than 5
users and running as many small tests as you can afford.” The basic premise behind Nielsen’s assertion is
that testing with no users gives you zero insights while testing with just one gives you an exponential
increase on that. Each additional test user brings an increasing number of repetitious insights, and a
decreasing number of original insights. Nielsen illustrates this with a nice graph curve. To be fair, he later
revisited his findings in a less-cited yet equally important article.
So whatever your budget for user groups, it is better to distribute it across several smaller groups spaced
evenly throughout the design process, rather than hedging all bets on one massive test-a-thon.
As well as testing your core target users, it can be very useful to round up some ‘rookie users’ – people
you might not expect to use your app or software and find out if there is a market for your product beyond
its perceived horizons. These rookies may tell you more about usability than your core market could.
Lastly, the way you communicate with your testers is the lynchpin to effective usability testing. They have
to be able to figure out tasks on their own, so objective and neutral language should be used when giving
tasks. A descriptive instruction (“you want to buy an XL sweater”) will always throw up more useful test
results that a prescriptive instruction (“Go to the Menu tab and click ‘Sweaters’ from the dropdown”).
Only descriptive instructions will let you know whether your users are intuitively navigating the interface
or not.
2. Interactive prototype with test-friendly features
Depending on the type of tests, and product you are developing, your prototyping tool needs to dispose
of different test-ready features. The minimum is scenario simulation, obviously. The simulate button
should allow you to work the prototype directly on the browser, which lets you realize testing remotely
or in-person. On top of that, realistic interaction, test-on-device capabilities and data table simulation are
also vital if you want users to really experience your end-product. If you want to run formal usability tests
you will probably need a prototyping tool that is integrated with a user testing tool.
3. A facilitator
Someone with skin in the usability game. The facilitator needs to know enough about users and their
habits to sense when to go deeper into an issue during testing and to be able to manage groups of people
who may have conflicting views of experiences.
4. Observers
It is appropriate for the design and development team to observe usability tests so they can understand
user reactions without mediation.
How to Run Usability Tests with a Prototyping Tool
There are several different ways to go about usability testing, but all have some basic precepts in common:
Use realistic content
Users, both during testing and in the wild, rely on content to aid their decision making; generic
placeholders are not intuitive to anyone. It is not necessary to go 100% for content-driven design if that
does not make sense for your end-product. Take the time to add realistic content, both images and text,
in your high fidelity prototypes prior to testing.
Use realistic data
As above, unrealistic data will at best be a distraction and at worst an obstacle. It does not take a lot of
effort to fill in generic email addresses (no celebrity or piratical names, as UX Matters makes clear!) and
it will incur more accurate results.
Design your tests thoughtfully
Think about timing. Anything between 5 to 10 clearly-defined tasks in a 60-90 minute session is typical.
You should be testing the product’s main functionality – login procedures, conversion funnels and the like,
before testing stardust sprinkled on top.
The way you word your tasks or questions is also crucial to getting useful results. Select judiciously
between direct and scenario tasks (Tingting Zhao explains the difference concisely here), and closed or
open-ended tasks: closed-ended tasks have only one possible successful outcome, whereas an open-
ended task could could yield a couple of results and still be defined as successful. Susan Farrell explains
how and when to leverage these different tasks here.
Whatever kind of task you go with, success criteria should be clearly defined and agreed upon for each.
Woolly accounts of generally positive user experience are unlikely to impress stakeholders or potential
investors. They will want to see the metrics and the success rates in black and white.
To moderate or not to moderate?
Prototypes, no matter how high the fidelity, are never going to be as comprehensive as the final app or
website. Users will probably have questions about what you want them to do, or how they might do it.
When testing a prototype, you will probably want moderators there to address these uncertainties and
make sure you are not wasting time or money.
Learn from failures as well as successes
A user ‘failure’, i.e. a problem, can tell you more than a user success, so make a note of it. Documenting
in detail which test participants had difficulties and at which junctures will help you iterate interfaces
faster.
3 Usability Tests for High Fidelity Prototypes
Problem discovery
The classic usability test, problem discovery does what it says on the tin – it finds the most pressing
usability speedbumps and (hopefully!) tells you how to fix them. It is like you are the doctor and your
interface is the patient. A problem discovery test will help you make a diagnosis and prescribe a cure. You
can do this more throughout an iterative design process for best results.
During a problem discovery test, the facilitator should monitor for issues and, when they arise, note and
explore the actions and speech of participants. The facilitator should have the expertise necessary to
analyze the outputs sensitively.
Eye tracking
Thanks to technology like Crazy Egg, it is possible not only to know where your users are clicking, but
where they are looking as well (not always the same thing). Eye-tracking tests can tell you a lot about the
psychology behind navigation flow and are particularly useful for understanding drop-offs and other
barriers to conversion.
Competitive
You may think you have a great interface, but that is a lame proposition if you do not know what you are
up against. Running competitive usability tests involves having two groups of participants carry out
identical tasks with the competition’s apps or websites. You might need to have a larger study sample
than Nielsen’s magic five to produce meaningful data, so competitive tests can be done remotely if your
prototyping tool supports that.
Common Mistakes when Testing High Fidelity Prototypes
Intervening mid-test
It is a common situation – a test participant runs into a problem and is struggling to complete a task. The
temptation on the part of the developer-observers is to stop the test or intervene. But watching
participants struggle with your prototype could help you solve in-built problems. Asking users why they
struggled or what they were trying to achieve will yield more interesting results than holding their hands
through test.
Tackling bugs ad hoc
Fixing glitches without first assessing all the evidence is never a good idea: actions based on half-formed
assumptions fly in the face of good usability test practices. A better approach is to use the prototype
testing stage to note and analyze as many problems as possible without interfering; you will then be in a
stronger position to start coding.
The Takeaway
There is no silver bullet for getting an issue-free software, app or site up and running. But these best
practices when testing on interactive prototypes can reduce coded reworks and go a long way to ensuring
you run meaningful and effective usability tests.
Create Page template (wireframing)
Building Better UI Designs With Layout Grids
Designers of all types constantly face issues with the structure of their designs. One of the easiest ways to
control the structure of a layout and to achieve a consistent and organized design is to apply a grid system.
A grid is like invisible glue that holds a design together. Even when elements are physically separated from
each other, something invisible connects them together.
While grids and layout systems are a part of the heritage of design, they’re still relevant in this multiscreen
world we live in. Technology devices have fundamentally changed the way we search for information and
how we function in our daily lives. Today, 90% of all media interactions are screen-based, where content
is viewed across mobile phones, tablets, laptops, TVs and smart watches. Multiscreen behavior is quickly
becoming the norm, and designing for multiple screens has become integral to businesses. As designers,
we want to provide delightful and enjoyable experiences to people who use our products — and grids can
help us do that.
Grids help designers to build better products by tying different design elements together to achieve
effective hierarchy, alignment and consistency, with little effort. If executed properly, your designs will
appear thoughtful and organized.
In this article, I’ve put together a lot of information about grids, such as:
 what grids are,

 a brief history of the grid,
 a basic theory of grids,
 four types of layout grids,
 layout grids in interactive design.
What Is A Grid?
In the most basic terms, a grid is a structure comprising a series of lines (vertical or intersecting) that divide
a page into columns or modules. This structure helps designers to arrange content on the page. While the
lines of a grid themselves are not necessarily visible (although in some designs, they are), the structure
helps you to manage the proportions between the elements to be aligned on the page. This grid would
serve as the framework for the page’s layout. Think of it as a skeleton on which a designer can organize
graphic elements (for example, text sections, images and other functional or decorative elements) in an
easy-to-absorb way.
Grids enable designers to build a solid structure and form into their designs.
The grid system originates in print design but has been applied to many disciplines. In fact, if we look
around, we’ll see that a lot of things we use daily were designed using a grid:
Barcelona’s Eixample district shows how architects used a grid to lay out the neighborhood.
Tables in Microsoft Excel are an example of a grid system applied to content.
Grids are usually applied to screen design. This page contains a grid of elements.
Brief History Of The Grid

Before we dive into details on layout grids and how they can be applied to digital products, it’s essential
to step back and look to the past to understand the basics. This knowledge will help us better design for
digital experiences. To learn more about the historical context of grids, be sure to check out Lucienne
Roberts’ article “A Brief History of Grids.”
GRID AND EARLY BOOK DESIGN
Grids are closely tied to typography. As a system, grids were first used to arrange handwriting on paper,
and then were applied to manuscript layout. Since the early days of book design, the grid has helped
designers arrange page layouts to aid the user in the act of reading.
The St. Albans Psalter, England, 12th century.
RENAISSANCE ERA AND HARMONIOUS DESIGN
Paintings in the Renaissance era had a significant impact on the development of grid systems. Artists
strived to create a perfect geometry, which resulted in centered and symmetrical canvas layouts, and it
characterizes the work of artists in that period.
Masaccio, 'The Tribute Money,' Brancacci Chapel, 1425.
In the 13th century, French architect Villard de Honnecourt created a diagram in an attempt to achieve
“harmonious design”. The diagram merged the grid system with the golden ratio in order to produce page
layouts with margins based on fixed ratios. The technique is still used today, with the majority of designers
of printed books and magazines using Villard de Honnecourt’s diagram to create balanced designs.
GRID AND PRINT DESIGN
From the beginnings of print (mid-15th century) until the Industrial Revolution (late-18th century), the
book was the primary output of printing. With rare exceptions, type was generally set in one justified
column per page and placed symmetrically on the spread.
Book from Renaissance era
INDUSTRIAL REVOLUTION AND COMPETITION FOR ATTENTION
The Industrial Revolution marked the beginning of mass production. The rise of print products such as
newspapers, posters, leaflets and advertising of all kinds, put print designers in high demand. Designers
had to solve two problems: communicate diverse messages to various groups of people and allow for
natural scanning behavior, while preventing different sections from competing for the reader’s attention.
Newspaper page with advertisement, Paris, France, 1919.
SWISS SCHOOL
The grid as we know it today is tied to Swiss typography. At the time of World War I, Switzerland, which
had maintained neutrality, became a meeting ground for creative people from all over Europe. Because
printed publications had to be set in the three official languages — German, French and Italian —
designers needed a new grid system that would allow for that. Typographers such as Jan Tschichold and
Herbert Bayer addressed it with a modular approach. For the first time, white space was used as a dynamic
component in layout design, and this led to the development of complex grid systems.
Josef Muller-Brockmann’s Grid Systems in Graphic Design, 1961.
A Basic Theory Of Grids
Whether you work in print or in web and mobile design, you need to understand the basics of grid theory.
ANATOMY OF A GRID
Whether simple or complex, all grids have some common parts:
 Format
The format is the area in which the design is placed. In a paper book, the format is the page. On the web,
the format is the size of the browser window.
 Margins
Margins are the negative space between the edge of the format and the outer edge of the content.
Margin for a block of content
 Columns and alleys
In its the most basic form, a grid is made up of two main components: columns and alleys. Columns are
the building blocks of grids. The space between columns is referred to as alleys. Together, columns and
alleys take up the horizontal width of the screen.
The space between columns is referred to as alleys.
Modules
Modules are individual units of space created from the intersection of columns and rows (i.e. the
horizontal equivalents of columns).
Modules are units created from the intersection of rows and columns.
FOUR TYPES OF LAYOUT GRIDS
Columns, modules, alleys and margins can be combined in different ways to form distinct types of grids.
Below are four standard layout grids:
 manuscript grid,
 column grid,
 modular grid,
 baseline grid.
Let’s go over when you might use each.
Manuscript Grid
A manuscript grid (or a single-column grid, as it’s often called) is the simplest grid structure. It’s essentially
a large rectangular area that takes up most of the space inside a format. Manuscript grids are good for
continuous blocks of text. However, they aren’t limited to text; images can be used to fill the block.
Given the name, people naturally associate manuscript grids with the printed page. Manuscript grids are
traditionally used in books and are a good layout for presenting continuous blocks of text.
Manuscript grid in iA Writer
As the name suggests, a multicolumn grid has a few columns. Remember this simple rule: The more
columns you create, the more flexible your grid becomes.
Column grids are useful for layouts that contain discontinuous information. When you use a multicolumn
grid, it’s possible to create zones for different kind of content. For example, you can use a particular
column just for an illustration.
Notice in this multicolumn grid that one column is reserved for images and captions.
Modular Grid
While a multicolumn grid splits a page vertically into a number of columns, a modular grid subdivides a
page both vertically and horizontally into modules. The columns and rows and the alleys between them
create a matrix of cells, or modules.
Modular grids are good when you require more control over a complex layout than a column grid can
offer. A modular grid provides flexible formats for pages and allows you to create a complex hierarchy.
Each module in the grid can contain a small chunk of information, or adjacent modules can be combined
to form blocks.
Each rectangle in this grid is a module. A modular grid is used when both vertical and horizontal space are
of equal concern.
Baseline Grid
A baseline grid is an underlying structure that guides the vertical spacing in a design. It’s used primarily
for horizontal alignment and for hierarchy. Similar to how you would use columns and modules as guides
in your design, you can use a baseline grid to build consistency in your layout. Using this type of grid is
akin to writing on a ruled piece of paper — the grid ensures that the bottom of each line of text (its
baseline) aligns with the vertical spacing. This makes a baseline grid not only an excellent typographic tool,
but also extremely helpful when you’re laying out elements on the page because you can quickly check
whether something on the page is missing a row of space.
A baseline grid shapes the vertical spacing of a design. Here, a modular grid is created by positioning
horizontal guides relative to a baseline grid.
Layout Grids In Interaction Design
Interaction design changed the way we think about grids. Interaction design is fluid and doesn’t have a
fixed size because people are using different types of devices to interact with the product, from the tiny
screens of smartwatches to ultra-wide TV screens. When using a product, people often move between
multiple devices to accomplish a single task with that product. Despite screen size, designers must
organize content in the most intuitive and easy-to-follow way. One approach to achieving this is to use a
layout grid system. A layout grid is preferable for interactive design because it defines the underlying
structure of a design and how each component responds to different breakpoints. This type of grid is
faster and easier to design for multiple screens and resolutions.
Layout grids in Adobe XD shown across multiple screen sizes.
Grid systems in digital product design organize elements on the page and connect spaces. A grid system
improves the quality of a design (functionally and aesthetically) and the efficiency of the design process
in several ways:
 Creates clarity and consistency
A grid is the foundation for order in a design. Proportion, rhythm, white space and hierarchy are all design
characteristics that directly affect cognitive speed. Grids create and enforce consistency of these elements
throughout an interface. An effective grid guides the eye, making it easier and more pleasant to scan
objects on the screen. This is especially important in digital products because they are functional, meaning
that people use the products to complete specific tasks, such as sending a message, booking a hotel room
or hailing a car ride. Consistency helps the viewer understand where to find the next piece of information
or what step to take next.
 Improves design comprehension
The human brain makes judgments in a fraction of a second. A design that is poorly put together will make
the product seem less usable and trustworthy. Grids connect and reinforce the visual hierarchy of the
design by providing a set of rules, such as where elements should go in the layout.
 Makes responsive
Responsive design is no longer a luxury, but rather a necessity because people experience apps and
websites on devices with a broad range of screens. This means that designers can no longer build for a
single device’s screen. The multidevice landscape forces designers to think in terms of dynamic grid
systems, instead of fixed widths. Using a grid creates a consistent experience across multiple devices with
different screen sizes.
 Quickens the design process
Grids enable designers to manage the proportions between UI elements, such as spacing and margins.
This helps to create pixel-perfect designs from the start and avoid timely reworking caused by incorrect
adjustments.
 Makes the design easier to modify and reuse
Unlike print production, digital products are never finished — they’re constantly changing and evolving.
Grids provide a solid foundation because when everything conforms to a grid, previous solutions can be
easily reused to create a new version of the design. A grid is a skeleton that can be used to produce
completely different looks.
 Facilitates collaboration
Grids make it easier for designers to collaborate on designs by providing a plan for where to place
elements. Grid systems help to decouple work on interface design because multiple designers can work
on different parts of the layout, knowing that their work will be seamlessly integrated and consistent.
GRIDS ARE A FUNDAMENTAL PART OF STYLE GUIDES
Implementation of most design projects involves collaboration between designers and developers.
Nothing is worse for a UI designer than submitting a pixel-perfect design mockup and finding that it looks
completely different in production.
Grids are a framework that speeds up the designer-to-developer workflow by allowing developers to pre-
set classes in their code that correspond to column sizes. This prevents inconsistent implementation and
reduces the number of hours required to build a website.
Best Practices For Layout Grids
While layout grids help designers to achieve a consistent, organized look in their designs and to manage
the relationships and proportions between elements, there are a number of things to keep in mind when
designing with a grid.
SELECT THE GRID YOU REALLY NEED
“How many columns?” is the first question designers ask when starting to work with a grid.
Adobe XD allows you to specify the number of columns, the gutter width and the column width.
Many popular frameworks use a grid system of 12 equal-widths column. The number 12 is the most easily
divisible among reasonably small numbers; it’s possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns.
This gives designers tremendous flexibility over a layout.
A grid system with 12 equal-width columns is robust and flexible and provides different ways of organizing
the structure.
While the 12-column grid is a popular choice among many designers, it’s not a one-size-fits-all solution.
When you choose a grid, select one with the number of columns you really need for your design. There’s
no point in using a 12-column grid if your layout needs only 8 columns.
An 8-column layout grid in Adobe XD.
How do you know how many columns to use? Before deciding on the number of columns, sketch out your
possible layouts (a paper sketch is fine). This means you’ll need to know what content will be on the
screen. The content will define the grid, not the other way around. With the sketches in hand, you’ll be
better informed on the number of columns you need.
A paper sketch for a web page layout. The number of columns should be defined by the content.
CONSIDER YOUR CONSTRAINTS
When designing a grid, consider the constraints on your design. For example, a majority of your users
might be using a particular type of device (such as a phone). This means that all design decisions (including
the grid) need to consider this constraint. Learning to design with constraints is a skill that will help you
focus on what’s really important to your users.
FRAME IMPORTANT OBJECTS
Direct the user’s attention to important elements by adding more visual weight to them. Tip: Items that
stretch across multiple columns are visually more important than items that fill only one column.
Framing important objects
DON’T BE AFRAID TO STEP OUTSIDE THE GRID
A grid column (not an ally) is where each block of content should begin and end. This rule is simple and
easy to follow; nevertheless, designers often intentionally break grid columns in order to increase visual
interest or emphasize certain elements. By breaking elements out of the grid, you’ll be highlighting them
because the viewer will quickly see those breaks and be drawn to them.
Breaking the grid makes certain elements stand out. Positioning an element loosely on the grid puts more
emphasis on it.
If you decide to break the grid, know what you’re doing. Taking things out of columns can break the visual
hierarchy and impair the user experience.
PAY ATTENTION TO BOTH HORIZONTAL AND VERTICAL SPACING
Laying out a grid requires attention to horizontal and vertical rhythms, which are equally important.
Consider the difference between the following examples. In the first example, the grid is consistent with
the column width and horizontal spacing, but the varied vertical spacing creates visual noise. In the second
example, both the horizontal spacing (i.e. the space between content blocks) and the vertical spacing
(between columns) are consistent, which makes the overall structure cleaner and the content easier to
visually consume.
Pay attention to both horizontal and vertical spacing. On the left, varied vertical spacing. On the right,
consistent vertical spacing
USE A BASELINE GRID TO ALIGN ELEMENTS
As mentioned, a baseline grid can be used for horizontal alignment and hierarchy. Aligning UI design
elements (text, images and content containers) to a baseline means you’ll need to make their heights a
multiple of the baseline value. For example, if you choose 8 pixels as a baseline value and want to align
the text, you will need to make the line height of the typeface a multiple of the baseline value, which
means the line height could be 8, 16, 24, 32, etc. Note that the font size doesn’t have to be a multiple of
the baseline, only the line height.
OPTIMIZE GRIDS FOR MOBILE
Mobile grids have limited space, making a multicolumn layout not really possible. Mobile content is
typically limited to one or two columns. When designing for mobile, consider using a tile layout grid, in
which the column and row heights are the same. This will give a look of square tiles across the design.
A tile grid on a mobile screen
On mobile, users have limited screen space and can only view a small amount of content at a time before
having to scroll. Thus, when designing a grid layout, make images large enough to be recognizable yet
small enough to allow more content to be seen at a time.
Yoox app for Android
Test It
Your grid isn’t set in stone. Like any part of a design, a grid should be tested and iterated on according to
the results of those tests.
Wireframing for beginners
Wireframing is an essential skill for UX Designers and other experience design participants. Yes,
wireframing is a skill, not just a technique. It can be done well or poorly and the result can have a huge
impact on the outcome of the final product.
Fortunately, like all skills, it can be learned and honed. This tutorial will point you in the right direction.
What is wireframing?
Wireframing, in the context of user experience design, is the act of creating user interface wireframes.
Michael Angeles, on his design blog “Konigi,” has one of the best descriptions of a wireframe out there
(emphasis mine):
“A wireframe is a schematic or other low-fidelity rendering of a computer interface,

intended to primarily demonstrate functionality, features, content, and user flow
without explicitly specifying the visual design of a product….
“Wireframes are usually rendered in software, but are also created as works on paper
or on other ephemeral materials, e.g. white boards. Wireframes are meant to be used
as rough representations of interface ideas that can be quickly discarded and iterated
upon until design solutions are selected.”
Wireframing is not the same as prototyping
Wireframing as a practice has more in common with sketching than prototyping, especially in the first
phase (which I’ll describe below). A prototype, on the other hand, while also not a customer-facing
product, is intended to demonstrate realistic interface designs and interactions, often for usability testing
and/or client presentations.
Unlike wireframes, prototypes often look and feel like the final product, even when they are not fully
functional or built with code that will eventually be used in the product. (“Click-through” wireframes can
be used as early-stage prototypes, but that is not their main purpose.)
The article “Why wireframes are essential for web design” likens wireframing to writing an outline in a
document. The author reasons: “You’re starting to make design decisions and get a feel for how this site
will come together before committing serious time to building anything.”
These concepts are important to keep in mind while creating wireframes.
The two phases of wireframing
Defining wireframing as simply the process of creating a wireframe sells it short. As UX designers know,
it’s not the tool that people want, it’s what it does for them that matters.
A wireframe is a tool. Successful wireframing is the practice of using wireframes to solve real problems.
The first problem that wireframing can answer is “what are some ways our product can help our
customers accomplish their goals?” (Note that this is an open-ended question, which is preferred, as
opposed to something more constraining, like “I need to design the export to PDF feature.”)
The second problem that wireframing addresses is “how do I know this solution will work?” This is where
the ability of wireframing to elicit helpful feedback and diagnose problems early really shines.
These problems can be divided up into two distinct phases: the ideation phase and the validation phase.
The ideation phase
The first problem, trying to figure out how your product can help customers accomplish their goals, is
addressed in the creative ideation phase of the wireframing process. This is where you generate as many
ideas as possible in order to iterate toward better and better solutions.
The ideation phase is one of the few places where quantity matters as much (or more than) quality. The
ability to generate multiple ideas and variations on a single idea allows you to see the faults and highlights
of each. The more designs you put down on the page, the more individual ideas you have to choose from.
The root of “creative,” after all, is “create”; that’s the strategy here.
A helpful way to think about this phase is to flip convention around. Focusing on creating only good ideas
may restrict you; instead, try to create as many bad ideas as possible. This will remove the creative block
and free you up to just produce. You won’t get to “aha!” without going through “oh, no!”
An ideation phase walkthrough
A good way to demonstrate what this phase looks like is to show an example. Here is a series of wireframes
that I created in about 25 minutes using Balsamiq Mockups (sped up 4x). I gave myself the challenge to
design a to-do list app for a mobile device (quite original, I know).
Tips for the ideation phase
 Don’t refine or dive too deep too quickly. Get messy. Add, add, add. Subtract later.
 Don’t judge your ideas before putting them on the page. Create first, reflect later.
 Learn to think separately about structure, layout, content, and functionality (see “How to Create
Wireframes That Wow” for more info)
 Practice working with different levels of detail until you find “just the right amount of detail, and
no more.”
 Read more practical tips for “UX sketching” that also apply to wireframing.
The validation phase
The second problem, determining whether your proposed solution will be successful, resides in the
validation phase of the wireframing process.
The ideation phase includes a small-scale, internal validation phase, where you, the designer, attempt to
validate your solutions on your own. But, whatever your role, you are lacking at least some information
and knowledge required to build the best solution. You may be missing essential information about your
customer, or the limitations of the technology, or some market segment data. In any case, to refine and
optimise your solution, you need involvement from other stakeholders.
Showing your wireframes allows others to help validate and improve your ideas.
The validation phase shouldn’t be thought of as the place to get “sign off” or approval to start building
right away. If you’ve done it right, your wireframes should invite conversation. If they look too polished
and “final” you may not get very helpful feedback. Wireframes should communicate “here’s what I’m
thinking…” when you show them, not “this is what we’re going to build.”
Assume that the people who you are showing your wireframes to have knowledge that can help you make
them better. Your job is to get it out of them.
You don’t need to show all your ideas during the validation phase. Here’s where you can narrow down
and focus on the better ones. That said, it’s perfectly acceptable to show variations on an idea or even
different directions completely. This reinforces the point that wireframes are a conversation starter, not
a finished product. You may want to keep a few alternate ideas in your back pocket anyway in case your
preferred ones don’t go over well.
In this phase, it’s important to think of your wireframes as communication artifacts. Their job is to help
other people understand your ideas. Visuals are very effective for conveying ideas, which is the true power
of wireframes.
Tips for the validation phase
Show a variety of ideas. This helps move the conversation forward (e.g., “I like A more than B”) and also
proves that you put thought into them.
Prepare your wireframes for viewing. Take some time to clean them up a bit. Examples: Link them
together to help tell the story; Use a more professional “skin” (depending on the audience).
Use a presentation mode (or similar) to show only the wireframes without the editor around them.
Don’t let the wireframe do all the talking. Supplement missing details with your own words rather than
trying to let the wireframe tell the whole story.
Add annotations as needed for later viewing and sharing (which can be turned off for presenting in some
programs).
You can find more suggestions in “Tips for Presenting Your Wireframes.”
Learning from the process
At the beginning of this article, I said that wireframing was a skill that could be improved over time. There
are two ways to do this that go hand-in-hand.
The first is practice. The more you do it, the better you’ll get. Practice helps you reduce your ineffective
effort and increase your fruitful work.
The second and most important way to improve in both phases is to consciously integrate comments from
the validation phase and feed it back into your ideation phase next time. You’ll learn a lot about how to
make your ideas clearer by showing them to others and getting their feedback, and you should put it to
good use.
As you practice, try to apply the same loop of iterating and improving your design ideas to your
wireframing process as a whole. Just as your design will improve by going through these phases, your
wireframing skills will too! Keep the circle of feedback and refinement going.
USING DIGITAL MEDIA FOR TESTING
David Ogilvy sometimes called the father of advertising, said those words back in the “Mad Men” era, long
before digital advertising existed—but they still ring true.
Ogilvy knew that to get the maximum impact from each dollar spent you had to test. As a marketer, you
are always trying to optimize performance to achieve the best results. This is even more important with
digital marketing as the digital world continually changes. So how do you do it? The answer today is the
same as it was back then—testing. Testing drives creativity, enhances performance results and helps to
understand what, why and how consumers will react to your marketing materials.
Why We Should Test
Beyond a bigger bang for your buck, there are other insights to be gained. For instance, you can use testing
to learn more about a particular segment or audience—their preferences, behaviors, interests, likes, and
dislikes. You can also test the performance of your creative and your messaging. It’s possible to test every
aspect of your ad or landing page to find out what resonates best with your audience and aligns with your
objective: image, copy and call-to-action (CTA) button.
How We Should Test
There are two different methods of testing, A/B testing and multivariate testing.
A/B Testing
Sometimes known as split testing, this method compares two nearly identical versions of creative with a
change to just one element. For example, the same landing page with different colored CTA buttons.
Multivariate Testing
This method tests multiple variables at a time to determine which combination of variations performs the
best. For example, building three pages that test combinations of different landing page layouts, CTA
button placement, and CTA color.
What Are the Benefits of Testing on Digital Platforms
Digital is a cost effective testing method. With digital media, you are able to garner learnings and insights
into audience behaviors and responses before investing in production and postage costs for traditional
tactics like direct mail or print.
Another benefit is the ability to see results in real time. Digital media allows you to view data and make
strategic decisions without the longer lag time of other tactics.
And digital testing is the smarter way to reach your audience. The ability to hyper-target users through
digital media means spending your marketing dollars more effectively and efficiently.
Create page template/ user experience wireframing
Motion Design: How Motion Graphics Influence User Experience
Animation in web and mobile interfaces has been an issue to consider and discuss for recent years. Let’s
review some insights on the impact that motion design can have on user experience.
What Is Motion Design?
Many people are unaware of what precisely the term ‘motion design’ means. Let’s shed a little light on it.
First of all, the term ‘motion design’ is a short form for ‘motion graphic design.’
As the name suggests, it is made of three elements: motion, graphics, and design. It is a combination of
graphics that are moving in space and time.
As technologies continue to create innovative solutions in the world of experiential design, motion design
is becoming more and more common. It was initially used as an application in film making and video
production through the use of animation and visual effects. Some of the most common examples of
motion design are:
 animated films,
 videos,
 animated text,
 web-based apps.
Designers use a variety of software and other tools to create motion graphics. One of the most popular
tools used by motion graphic designers is Adobe After Effects, which allows for creating and modifying
graphics with an added element of time. Adobe Flash is also used to create motion design for web-based
applications. Other professional motion graphics tools include Maxon Cinema4D and Softimage.
A typical motion designer should be trained in graphic design and should be an expert in integrating the
elements of time, sound and space into the existing model. Most motion designers have a film or
animation background which makes the job even more comfortable.
In short, motion graphics include everything you see on the TV at the beginning of a news program,
cartoons, character animations, animated typography, explosion scenes in movies and other visual
effects. Almost anything that wasn’t shot on camera and isn’t considered special effects can be
categorized as motion graphic design.
So, whether it is combined into a real-life video or a whole series of moving graphics, it is considered to
be motion design.
Why is Motion Graphics Design Important?

Thanks to social media, humans are now consuming a massive amount of content every day. People scroll
through their social media news feeds to find something eye-catching and search for easily digestible
information.
According to research by MIT, a person can process visual information in as little as 13 milliseconds which
proves that the human brain process information presented through visuals much more easily. Another
factor is that many people consume social media content while their phones are muted. So, the need to
communicate your message through only visuals is even more critical in today’s world.
This is why marketers all over the world are using motion graphics to capture their audience’s attention
successfully.
Here are some techniques in which marketers can use motion graphics to fulfill all their communication
needs:
 Traditional ads: Marketers can use motion graphics in online videos or television commercials to
showcase their products.
 Promo videos: All sorts of editorial or advertorial videos such as viral videos, case studies,
testimonials, user reviews are included in this category.
 Explainer videos: Most people use motion graphics in explainer videos. They include introductions
to new products or services, overviews, business processes and tutorials.
 Social media videos: Another popular form of motion graphics include social media videos which
are created to engage followers on social platforms like Facebook, Instagram, Snapchat, YouTube,
etc. According to research by Tubular Insights, 64% of consumers are convinced to purchase a
product after watching a video on social media.
How Can Motion Design Enhance User Experience?
Marketers work hard to come up with an impactful content strategy which contains a little bit of
everything, including articles, infographics, videos, and more. However, there is no denying the fact that
people prefer videos more than any other format.
According to a survey by Wyz Owl, 81% of businesses use videos as a marketing tool because it encourages
engagement and improves the user experience.
Here are some other ways which make motion graphics so special and how they can help you tell your
brand’s story.
1. Create Emotionally Captivating Content
Apart from being a medium of grabbing your followers’ attention, motion graphics also play a vital role in
capturing a viewer’s emotion. This is a biological response. Thanks to the phenomenon of emotional
contagion, viewers immediately empathize with the experiences and feelings that are depicted on a
screen.
Hence, when a brand showcases emotional stories through motion graphics, they manage to make a point
much more easily. Take a look at the video below which was created in collaboration with International
Justice Mission to spread awareness around everyday violence all over the world.
2. Helps Understand Complex Procedures
Motion graphics distill information so that they are easy to comprehend for a typical viewer. As we
discussed earlier, data is relatively easier to digest and remember when it is displayed in a visually
appealing way as compared to reading them in a monotonous series of words. This is why motion graphics
are used successfully to create videos around processes, data visualization, and abstract concepts.
3. Reflects Your Brand’s Personality
Motion design is a surefire way to show your brand’s personality to your followers. If a brand is playful or
serious, the animation should show the same. This is why designers are learning how to incorporate design
for motion.
While motion in branding may not be a new concept, it is becoming common nowadays. Read this article
to see the best examples of how motion graphics can bring a brand’s personality to life.
4. They Make an Impact in a Small Period
Most motion graphics range anywhere between 30 seconds to 3 minutes long, which is extremely helpful
when you need to make an impact in a short period.
Motion graphics utilize an average person’s information processing abilities and lets you create a
significant impact with less content. What makes a 1500 word article to explain in words can be visually
communicated in less than 15 seconds. It’s a perfect alternative for times when you have less time to
make an impact.
After Effects for Presenting Animation
After Effects is a powerful bit of kit that is capable of some hugely impressive things when it comes to the
world of Motion Graphics, VFX, 3D, and Animations. However, if you are new to AE, don’t be put off by
the sheer scope of what this app can do, because it’s actually surprisingly comfortable to get started with
some of the simpler aspects of using AE, all helped along by a friendly and familiar interface.
So why would we use After Effects, and what is the difference between After Effects and the other video
editor from Adobe called Premiere Pro? In it’s most basic terms, After Effects is a lot like the ‘Photoshop’
of the video world, allowing you a lot more options and control to edit or manipulate footage and
animations, whereas Premiere Pro focuses more on piecing together footage, titles, and music to tell a
story, After Effects provides all of the sparks and smoke for the action scenes!
Before we get into the list, it has to be said that Adobe does a surprisingly great job of explaining the very
basics of After Effects with a fantastic series of videos on their own website where you’ll quickly start to
understand how the interface works, so if at any time you find yourself lost with anything it’s definitely
worth at least glancing over the official help guide to find your feet.
If you’ve ever had the need or the urge to try your hand at some video effects, or motion graphics here’s
a complete rundown of concise, easy to follow video tutorials along with templates and resources with
the goal of getting you going with Adobe After Effects for the very first time, each collected into handy
categories for quick reference on specific points of AE.
Interface, Windows & Panels
Most versions of After Effects operate with the same basic interface layout from the moment you launch
the application. In very simple terms you can break the main interface down into 4 key sections. You have
your Project Files i.e. your media files, footage, and images etc on the left. Your Composition Window sits
in the very center, which is essentially a ‘live view’ of what’s happening as you make edits. Over on the
right side you basically have your Effects and at the very bottom of your screen you’ll see your Timeline.
The Timeline
Those of you that are comfortable with graphics editing may be used to the idea of using layers to build
up a piece of work, and thankfully something similar exists in After Effects. When working with video or
motion graphics inside AE you still have the ability to stack layers just as you would expect, but this all
happens via a timeline where it is just as important to control the duration of your layers or effects, and
then control what happens to them and for how long. Changes made to your layers will be ‘recorded’ via
your timeline, and then you have the to play with the timing of those parameters. This is where your battle
with AE can be won or lost, so make sure you grow comfortable with your timeline window.
Effects, Plugins & Presets

Where after effects starts to prove itself as the ‘Photoshop for Video’ is with the various effects and
plugins that are available. Lots of fantastically powerful effects are included from scratch when you install
AE, ranging from basic controls such as Brightness & Contrast all the way up to advanced smoke and
particle effects. Best of all there is a fantastic community of creators that support the app with a wealth
of 3rd party plugins, tools and presets too — so there’s always an ever evolving eco-system to help push
your work to the next level, or make things easier for you.
There’s no real starting point or introduction with effects as there are an incredible number of possibilities,
so in order to become comfortable with effects you need to really need to find some time explore and
experiment, or take a glance at some of the videos we’ve collected below to give yourself a head start.
Presets can come in handy if you want to use ‘ready made’ styles, effects or transitions that you can just
apply to your footage in an instant, with the values or controls already defined by the preset maker. These
work almost like the idea of using ‘filters’ on Instagram for example. Or you can of-course make your own
presets to create a re-usable style or effect that you’ve created.
Templates are complete projects or compositions that you can open in AE and use as the base of your
project, then by simply dropping in your own footage or editing a text layer or two you have a custom,
high quality end result without having to put hours of work in.
Here’s some useful explainer videos and resources to give you an insight into how effects and presets are
applied, and what plugins can be installed to step up your vfx.
Masking
When it comes to masking, what you are in essence doing is using shapes to ‘cut out’ part of a layer
allowing the layers below to be seen through the shape you make. Of course it’s a whole lot more
advanced than that once you dive into all of the things that masks can do, but for those that are very new
to masking you basically use shapes to hide and reveal parts of a layer or piece of footage. These are great
for transitions and reveals and anyone using After Effects extensively will be likely be using masks on
almost every project.
Animations & Keyframes
One of the fundamental parts of After Effects is understanding animations and keyframes. Once you
realize what these little guys do, everything starts to click into place when it comes to motion and time.
Keyframes mark a set of values at a specific point in time, essentially the main trigger points for your
animation, defining how something looks at that point in time — then AE will do it’s magic to smoothly
fill in the gaps between your main keyframes, creating an animation.
You can control anything with Keyframes, so you could decide an object’s position, it’s opacity or even
various effects all at once — basically anything you can apply to a layer can also be controlled with
keyframes, allowing you to alter the values over time in order to animate a specific parameter. Once you
have your main keyframes in place you can even alter the velocity that those actions take place by editing
the easing, making your animations softer and more realistic.
Adjustment Layers
Adjustment layers are not unique to After Effects, so if you are familiar with the idea of adjustment layers
then you’ll be happy to see them here in AE too. Adjustment Layers are a great way to apply effects or
properties to multiple layers at once, so instead of having to go through and copy / paste settings
individually, you would simply apply all of those properties to your adjustment layer which would in-turn
apply those properties to the multiple layers below that you want it to affect. This can save you all sorts
of time and effort when you are looking to apply global effects to your project and it’s particularly useful
when color-correcting your footage.
How to Create a Simple Web App Using JavaScript
PSA: JavaScript (JS) is dangerously addicting. So addicting that in my spare time, I develop random web
apps to humor myself and of course, to practice some JS coding skills. JavaScript, just like any foreign
language, may at first seem somewhat daunting to learn (who is this anyways? and why doesn’t it like
me?). However, remember:
We can start making a basic, interactive web app using JS. Let’s also have a goal to fulfill this in about 20
lines of code. Ready? Let’s go!
What We’re Building
Let’s build a web app that serves as a daily self-motivator and tool to brighten up your mood. I got it. An
app that shows you a random Kanye quote along with an option of a random cat photo.
To implement this idea, we can use 2 different API’s (application programming interface) that will help
with the backend, 1) Kanye.Rest and 2) The Cat API
The App
Open your preferred text editor (I use VS Code) and create a repository with 2 files: index.js and
index.html. The index.js file is where all your JS code goes. The index.html file holds the structure and
format of your webpage.
Since we are building a simple web app, we won’t be using any advanced CSS formatting or designing
here. The main structure of your HTML file will look like this:
In the HTML file, be sure to have this line of code:
<script defer src="src/index.js" charset="utf-8"></script>
The “defer” informs the browser to wait until the page loads to run the JavaScript.
Next, we should create a div where the Kanye quote will be placed. Let’s give this div an id called
“quotes.” That way, we can easily find this div with this specific id when we need it.
Pro-Tip: It’s always best to add id’s to your important HTML tags, especially the ones that you know you
will need to grab and call on in your code. It is easier to find HTML elements by “id” than class name
because id’s HAVE to be unique!
We should make a button that when clicked, will display a random cat photo on the browser. The button
will have an id of “give-cat.”
Lastly, create a div with an id of “cat-pic”, which will hold the cat photo.
Now, let’s go to index.js file and start coding JS!
Use the Kanye API to Fetch Kanye Quotes
The first step we should is find the div where the quote will be placed and declare it as a variable. We
can do this by typing:
let quotesDiv = document.getElementById('quotes')
In order to retrieve data from the Kanye and Cat API’s, we need to utilize the fetch function. For this first
part, we are sending a GET request to the Kanye API.
The fetch returns an object as the response from the request. We call the .json () method on the
response to parse the response text as JSON.
Next, we do another .then(). Here we receive the JSON object that we can finally use to manipulate the
DOM! We can call this new JSON object quote.
Remember that quotesDiv variable we declared earlier? We need to use it here now. In order for us to
append this quote to the DOM, we can call the innerHTML property on quotesDiv.
Taking a look at how the JSON object looks like, we can see that quote is also a key.
Thus, we write:
The whole block of code should look like this:
Let’s see how our DOM looks now!
Awesome! On to the next deliverable!
Use the Cat API to Fetch Cat Pictures
We now need to add onclick functionality to the button. Grab the button by finding it by the id and
declare it as a variable called catButton.
let catButton = document.getElementById('give-cat')
Next, we need to add an event listener to the button. The event listener takes two arguments: 1) the
event 2) a callback function to handle the event.
catButton.addEventListener("click", evt => {
Before we do the fetch, let’s designate the part of the DOM where the cat photo should go. Find
the div with the id “cat-pic” and declare it as a variable.
let catDiv = document.getElementById('cat-pic')
Now, we make a GET request to the Cat API. In the last .then(), we have to do a forEach method on the
JSON response since it is an array.
We call the innerHTML property on the catDiv. Let’s insert a cute header and an image tag for the
picture. “URL” is a key in the response object, so we need to use it here in order to display the image.
Moment of truth! Let’s see how our final page looks!
Woohoo! It works!
Let’s go back to our code and take a final look at it.

It appears that we also accomplished our goal of completing this task in about 20 lines of code!

Develop Designs For User Experience

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Develop Designs For User Experience

Uploaded by

Copyright:

Available Formats

Develop designs for user experience

Select media/ materials for user experience design

With User Behavior Psychology to better UX Design

How can we use these behavior models to design better UX?

Guide on the Differences Between UI and UX Design

What is User Experience Design?

What’s the Difference Between UI and UX?

2. The colors they use

 UX is not UI, but they do complement each other:

Career Foundry illustrates the key responsibilities of each position.

UX Designer Skills and Responsibilities

1. Content/Strategy: Customer Analysis, Competitor Analysis, Product Structure/Strategy

UI Designer Skills and Responsibilities

What Kind of UI/UX Design Course Should You Take?

16 Best UX Tools for Designers

16. Visual Website Optimizer

Flow Design Processes - Focusing on the Users' Needs

How Do We Design for User Flow?

So for example on a retail website this might include:

 User wants to buy a new product

The Task Completion Funnel

This will normally involve:

Considerations for Point of Entry

With each point of entry you may want to consider:

Considerations for Landing Pages

For each landing page you will want to think about:

Considerations for Process Steps

 How can we minimize steps in the process without over-complicating screens?

The Take Away

Why are hyperlinks used on web pages?

What happens when you click a hyperlink?

Why are some hyperlinks different colors?

How can I click a link without using a mouse?

How to create a hyperlink on an image

Why Usability test Interactive Prototypes?

When to Run Usability Tests

Prototype-specific Test Factors to Keep in Mind

How to Run Usability Tests

2. Interactive prototype with test-friendly features

How to Run Usability Tests with a Prototyping Tool

Use realistic content

Use realistic data

To moderate or not to moderate?

Learn from failures as well as successes

3 Usability Tests for High Fidelity Prototypes

Common Mistakes when Testing High Fidelity Prototypes

Tackling bugs ad hoc

Building Better UI Designs With Layout Grids

 what grids are,

Tables in Microsoft Excel are an example of a grid system applied to content.

Brief History Of The Grid

GRID AND EARLY BOOK DESIGN

RENAISSANCE ERA AND HARMONIOUS DESIGN

Masaccio, 'The Tribute Money,' Brancacci Chapel, 1425.

GRID AND PRINT DESIGN

INDUSTRIAL REVOLUTION AND COMPETITION FOR ATTENTION

A Basic Theory Of Grids

Whether simple or complex, all grids have some common parts:

 Columns and alleys

FOUR TYPES OF LAYOUT GRIDS

Let’s go over when you might use each.

Manuscript grid in iA Writer

Layout Grids In Interaction Design