IFI7313.DT Interaction Design Methods course in Tallinn University, 1 February 2018

1. Competitive
Reviews in
Interaction Design
IFI7313.DT Interaction Design Methods

2. Reasons for competitive review
• Find out how other people solved
the same design problems
• Validate desired features and
priorities against a similar site
• Explore approaches to solving
similar problems

3. Guidelines
• Focus: you can’t compare too many systems/features/
problems
• Create a set of criteria for comparison
• Choose meaningful systems for comparison

4. Competitive review structure
• Summary: objectives, study questions, and criteria
• Conclusions: one sheet/slide per conclusion, with screenshot
fragments
• Competitor profiles

5. Competitor profile
Beatport.com Release Page
Beatport release page displays additional
information that is important for dj’s.
What works:
• Track length and BPM are displayed
on release page
• Waveform and key are displayed on
track details page
• Release description
• More releases from the same label
What doesn’t work:
• Release title is displayed in capital
letters
• Price is displayed without taxes
Take-aways:
• Display detailed metadata
• Make metadata easy to copy
• The system could recommend tracks
with compatible key, tempo and style

6. Conclusion
Like any story p
the end.What d
web sites? Did y
should designer
design project?
By putting your
ing a partial dir
their cues for th
Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com) 3 of 4
o gred e ts o et food roduct age
Pet owners think about what they’re feeding their pets, sometimes even more than
what they feed themselves. Displaying the ingredients right on the product page
provides the information shoppers need to decide what food is right for their pet.
Take-Aways
List ingredients as part of the product description.
If linked, incorporate“ingredients”as part of the label
for the link or tab.
Format as a list, rather than as a comma-delimited
paragraph.
Considerations
Make individual ingredients linked to more
information about it
O er product comparisons so users can see how
di erent foods compare in their ingredient lists
Petsmart.com Petco.com DrsFosterSmith.com Je ersPet.com
Comprehensive list of ingredients
but“hidden”under Product
Details tab.
Formatting of list dense and
di cult to read.
Typography of ingredients list
makes it easy to read.
Requires scrolling down and
clicking tab.
Ingredients list behind“more
information”tab. Finding
ingredients requires scrolling.
Essential data about food
presented in nice table. (not
shown)
Ingredients list presented
prominently on the page,
adjacent to product image.
Figure 10.1: A conclusion summarized in a competitive analysis clearly
states the lesson learned, offers some details about it, and provides
evidence in the form of screenshots.
(Brown, 2010)

7. Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com) 4 of 4
JeffersPet.com Product Page
Pet owners deliberate about some purchases for their
pet, like food and dietary supplements, but other
purchases (even large ones) may be more impulse, as
an expression of appreciation.The product page needs
to balance these two scenarios.
What works
Detailed product description
Speci c product name
Prominent calls to action
Clear breadcrumb for easy hierarchy navigation
What doesn’t
Small product image
Poor page layout
Scrolling local navigation
Take-aways
Focus page on product description, not chrome
Show large product images
Align page navigation with product comparisons
1
2
3
4
5
6
7
1
2
3
4
5
6
7
Conclusions and Takeaways
Like any story part of the design process, you start at
nd the
d and give
a specific
em to take
ow view
Figure 10.2: A competitor profile can
speak more holistically about the site,
but lessons learned become spread
throughout the document.
(Brown, 2010)

8. deal with uncommon pets (turtles).Wi
conclusions—and therefore design dire
ter informed.
Assuming you’ve organized your docum
10.1, you’ll have a separate page dedica
sion, illustrating that conclusion with sc
or components from various sites. Som
you lay out those pages:
• Make the conclusion very prominent
• Provide a more detailed description o
• Show just enough of the site to illustr
providing short descriptions explaini
• Consider incorporating an “anti-exam
illustrates the wrong way to impleme
Summarizing the Conclus
While designers will find detailed treatm
conclusion and assertion useful, the do
summary at the beginning, a cheat shee
lessons learned.The summary should ca
established through the competitive ana
of the competitive framework.
Note in Figure 10.4 that summarizing t
framework means identifying the range
and the criteria by which they were eva
and broader the analysis, the more you’
the framework. Looking at a broad rang
many criteria means barely scratching t
depth on the summary page.
Characterize the range of sites visited b
explicitly; it’s even better if you can sho
Figure 10.3: Conclusion pages must prominently show the takeaway and explain how the illustrations support it.
Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com)
o gred e ts o et food roduct age
Pet owners think about what they’re feeding their pets, sometimes even more than
what they feed themselves. Displaying the ingredients right on the product page
provides the information shoppers need to decide what food is right for their pet.
Take-Aways
List ingredients as part of the product description.
If linked, incorporate“ingredients”as part of the label
for the link or tab.
Format as a list, rather than as a comma-delimited
paragraph.
Considerations
Make individual ingredients linked
information about it
O er product comparisons so use
di erent foods compare in their in
Petsmart.com Petco.com DrsFosterSmith.com Je e
Comprehensive list of ingredients
but“hidden”under Product
Details tab.
Formatting of list dense and
di cult to read.
Typography of ingredients list
makes it easy to read.
Requires scrolling down and
clicking tab.
Ingredients list behind“more
information”tab. Finding
ingredients requires scrolling.
Essential data about food
presented in nice table. (not
shown)
Ingre
promin
adjac
Conclusion
Evidence
Design Direction
(Brown, 2010)

9. sites, all with a
ites each: product
sites.
o nebulous to spell
subject matter:
navigation and clas-
he experience in
e gleaned implicitly
nce issues, from
gement.
criteria and sub-
nce them on the
pe
displays two critical
nd the criteria.
e framework.The
is to present the
pare the various
Figure 10.4: Summarizing the conclusions at the beginning of the document gives the project team a rundown of all the
lessons learned from the competitive analysis.
Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com) 2 of 4
We compared 5 sites Across 20 criteria, including:
commerce tes for Pet ers
What we did
Conductedcompetitive reviewof other prominent
pet supply web sites.
Our objective
Establishcommon practicesfor selling common pet
supplies on the web.
What worked
✓ Navigation categories based on pet type.
✓ Navigation categories with common supplies (like
food and toys).
✓ Recommendations based on previous purchases.
✓ Home pages that highlighted new products, specials
and the range of the catalog.
✓ Prominent calls to action taking users to the next
step in the shopping process.
What didn’t work
✗ Dense product pages: Squeezing all the information
onto a single page with tabbed panels hides
information that may help users make a purchase.
✗ One-size- ts-all product page: Users require
di erent kinds of information about di erent
product pages.
✗ Long lists of category links: User research shows
that some products are clearly more important than
others, and navigation should re ect that.
Navigation structures
Product displays
Gallery pages
Product classi cation
Merchandising
Home page features
Calls to action
Account management
Petco.com Petsmart.comJe ersPet.comDrsFosterSmith.com 1800PetMeds.com
(Brown, 2010)

10. Does the home page… PetSmart.com Petco.com
introduce a range of products, illustrating the breadth of the store? no no
make the search function easy to find? yes yes
display off-line contact information? no yes
Does the navigation… PetSmart.com Petco.com
meet user expectations by including pet type? yes yes
provide access to ecommerce functions? yes yes
change seasonally? no no
incorporate links to sales, specials, or other product categories? yes yes
Table 10.3: Positioning the criteria as questions allows readers to compare and contrast the two sites quickly, and
hints at the desired approach.
landscape. Co
the two-by-tw
for your site t
There’s one o
appears in com
small multipl
EdwardTufte.
Tufte writes: “
movie: a serie
tion of variab
Small multipl
compare simi
face design fo
comparing pa
Types of c
While most o
General
HealthyPets.com
(Brown, 2010)

11. face design for the web, this
comparing page layouts, as in
Types of comparisons
While most of my competitiv
data, you can attempt to quan
make.The data can be as sim
ing whether a site meets a pa
descriptive, going into some
• Yes-NoValues: You’ve seen
analyses on infomercials w
is lined up with “other lead
the product gets a checkm
an X, to show you how ver
comes to web sites, the stra
most effective for consider
whether a set of web sites
In such a comparison, how
between the competitors m
• Scores: Some competitive
in different criteria.You’ll s
rant reviews where every p
of its food, the ambiance, t
General
Specialized
Commerce
Content
HealthyPets.com
PetTurtle.com
LucytheWonderDog.com
DrsFosterSmith.com
PetSmart.com
PETCO.com
Yahoo! Pets
1800PetMeds.com
StuffForPugs.com
Figure 10.5: A comparative two-by-two establishes a simple framework
for comparing a handful of web sites. Such an approach offers worthwhile
insight if the criteria provide concrete action for the design team.
(Brown, 2010)

12. Task
• Review 3…4 systems that are similar to your project idea (one for each group
member)
• Focus on:
• Who are possible users of the system? What are their goals and motivations?
• Good design solutions
• Not so good design solutions
• Business model of the system
• How your project idea is similar / different

13. https://www.nngroup.com/articles/ten-usability-heuristics/

14. http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5

15. References
• Brown, D. M. (2010). Communicating Design: Developing Web Site
Documentation for Design and Planning (2nd ed.). Berkley, CA: New Riders.

16. Photos
• John Blyberg, https://www.flickr.com/photos/jblyberg/4976951706/

17. Hans Põldoja
hans.poldoja@tlu.ee
IFI7313.DT Interaction Design Methods
https://ifi7313.wordpress.com
Tallinn University
School of Digital Technologies