<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet title="XSL_formatting" type="text/xsl" href="/blogs/shared/nolsol.xsl"?>

<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>

<title>
BBC Internet Blog
 - 
Sylwia Frankowska-Takhari
</title>
<link>https://bbclatestnews.pages.dev/blogs/bbcinternet/</link>
<description>Staff from the BBC&apos;s online and technology teams talk about BBC Online, BBC iPlayer, and the BBC&apos;s digital and mobile services. The blog is reactively moderated. Posts are normally closed for comment after three months. Your host is Eliza Kessler. </description>
<language>en</language>
<copyright>Copyright 2012</copyright>
<lastBuildDate>Tue, 13 Jul 2010 14:50:00 +0000</lastBuildDate>
<generator>http://www.sixapart.com/movabletype/?v=4.33-en</generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs> 


<item>
	<title>Formative user research for the BBC&apos;s Global Visual Language 3</title>
	<description><![CDATA[<p>Following <a href="https://bbclatestnews.pages.dev/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html">Bron's post on the new Global Visual Language</a> we received <a href="https://bbclatestnews.pages.dev/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html#P92503191">several questions</a> about our approach to user research. Hopefully we can shed some light on some of our activities.</p>

<p>We began our research with a <a href="http://en.wikipedia.org/wiki/Literature_review">literature review</a> and then performed a <a href="http://www.usabilitynet.org/tools/competitoranalysis.htm">competitor analysis</a> to identify our strengths, weaknesses and opportunities This was followed-up with  a series of in-depth <a href="http://www.usabilitynet.org/tools/interviews.htm">interviews</a>, surveys, <a href="http://www.usabilitynet.org/tools/cardsorting.htm">card sorts</a> and <a href="http://www.usabilitybok.org/methods/diary-study">diary studies</a>; and finally usability testing on early <a href="http://en.wikipedia.org/wiki/Paper_prototyping">paper prototypes</a> and high-fidelity prototypes. </p>

<p>The studies were carried out both in-house and with external usability agencies, and provided us with heaps of qualitative data.</p>

<p>The main objectives at this stage were:</p>

<ul>
	<li>To uncover users' natural internet behaviour; and more specifically people's use of the BBC digital services on different devices (e.g. PC, mobile)</li>
	<li>To validate the GVL3 design philosophy and gain insights into how users interpret the set of values based on their experience with the BBC digital services</li>
	<li>To explore the concept of 'modern' web design </li>
	<li>To find out how users recognise websites they are familiar with and what design elements trigger recognition of online brands</li>
</ul>

<p>The last objective led to a rather interesting activity, the 'onion-skinning' exercise, which was based on the theory of visual recognition (as opposed to recall) memory. In short, the theory says that objects (eg people's faces) stick in our recognition memory by experience and with frequent exposure to them. To recognise something or someone we look for so called visual cues (e.g. shapes, colours) which help us spot the objects we are familiar with among others we have not seen before (<a href="#ref">Baddeley, 2009</a>). In turn a visual recognition memory task provides visual cues that facilitate searching through memory for help in recognising familiar objects.
</p>
<p>
In our 'onion-skinning' exercise we selected the following six design elements (or visual cues): layout, header & footer, icons, typeface, images and colours. We then selected ten popular websites and deconstructed each of them into the six cues.</p>

<p>For this particular study we recruited fourteen participants aged 16 to 55+ (ensuring a 50/50 gender split, and a mix of experienced and inexperienced internet users).  It was crucial that all fourteen participants were familiar with the BBC Homepage and regularly used at least five of the following websites: <a href="http://news.bbc.co.uk/">BBC News</a>, <a href="https://bbclatestnews.pages.dev/iplayer/">BBC iPlayer</a>, <a href="http://store.apple.com/uk">Apple store</a>, <a href="http://www.bt.com/">BT</a>, <a href="http://www.ebay.co.uk/">eBay</a>, <a href="http://www.guardian.co.uk/">Guardian</a>, <a href="http://uk.msn.com/">MSN</a>, <a href="http://www.wikipedia.org/">Wikipedia</a> and <a href="http://uk.yahoo.com/">Yahoo</a>.  
</p>
<p>
We started each session with a conversation about how important the design of websites was for participants. It was quite clear from the beginning that the participants naturally fell into one of two groups: 'design-aware' participants for whom design was very important and could potentially either attract them of put them off using websites, and another group of 'content-driven' participants, who weren't so much concerned with the design as long as they were able to easily find information they wanted. Perhaps unsurprisingly, the division seemed related to age with the younger participants being more design-aware.</p>

<p>The participants were presented with six web pages they had said they were familiar with. They saw each page in six steps (with new cues added each time). </p>

<p>
After they saw each cue, the participants were asked whether they recognised the page, how confident they were, and to describe what had helped them recognise the brand.  </p>

<p>
Here's an example. The first cue was layout.</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="2a_595.jpg" src="https://bbclatestnews.pages.dev/blogs/bbcinternet/img/2a_595.jpg" width="595" height="733" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span>

<p>
Do you recognise the page shown above? </p>
<p>
In the study the only page that was recognised at this first stage was a Wikipedia article page (but even then only two out of fourteen participants). The minimal design and consistency of layout seemed to help users with recognition. Both participants were in the 'design-aware' group.
</p>
<p>It was also interesting to observe that participants had clear expectations about how certain type of pages were laid out (such as a news page, a social networking page or media player page).</p> 

<p>The next layer included icons (in black and white):</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="2b_595.jpg" src="https://bbclatestnews.pages.dev/blogs/bbcinternet/img/2b_595.jpg" width="595" height="733" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span>

<p>Icons appeared to play a rather important role in triggering recognition of websites when used sporadically and when very distinct  (the rosette 'top-rated seller' on eBay, or the home icon on the Apple Store page). If used consistently across products and services, icons would play an important role in recognising a brand. </p>

<p>The next layer introduced the header, footer and typography (with dummy text).</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="2e_595.jpg" src="https://bbclatestnews.pages.dev/blogs/bbcinternet/img/2e_595.jpg" width="595" height="733" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span>
 
 
<p>Have you recognised it as a BBC News article page yet? </p>

<p>The typeface was one of the features that triggered the recognition of pages for most participants. Comments on the BBC News page and BBC homepage were: "Now I'm confident it is a BBC page, this is the BBC font." (Male aged 16) and "BBC-like font, it's quite identifiable." (Female aged 19). It was interesting to observe that the font we were using was so strongly associated with the BBC. However, quite a few participants suggested that this was a time for change:  "I grew up with it [the same font]. It's time for change. It needs something fresher" (Male aged 48)</p>

<p>The suggested change of typeface tallied with out own ambition and we took it seriously. Participants expected the new BBC font to be neat and modern-looking.</p>

<p>The final step was colour.</p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="2g_595.jpg" src="https://bbclatestnews.pages.dev/blogs/bbcinternet/img/2g_595.jpg" width="595" height="733" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span>
 

<p>Are you confident now? Images and colours definitely helped the participants recognise pages. The more 'content-driven' participants in particular had to go through all six stages of the exercise until they were absolutely sure. The strongest elements on current BBC websites were: the typeface, images and colour (e.g. red on BBC news article page).</p>

<p>This is an example of just one exercise we carried out in the formative stage of our research. 
The findings helped us realise that users were very perceptive to typeface, icons and colours; and that consistency and simplicity of these elements would ensure that we were providing our users with coherent, joined-up experience across the site.</p>
<p>
<em>Sylwia Frankowska-Takhari is Usability & Accessibility Specialist, FM&T User Experience & Design.</em>

</p>
<p><a name="ref">References:</a>
Baddeley, A., Eysenck, M.W., Anderson, M.C. (2009). <em>Memory</em>. Hove, UK.: Psychology Press. </p>

<ul><li>You can <a href="https://bbclatestnews.pages.dev/guidelines/gel/">download the GVL3.0 style guide here</a>.</li>
</ul>]]></description>
         <dc:creator>Sylwia Frankowska-Takhari 
Sylwia Frankowska-Takhari
</dc:creator>
	<link>https://bbclatestnews.pages.dev/blogs/bbcinternet/2010/07/formative_user_research_for_th.html</link>
	<guid>https://bbclatestnews.pages.dev/blogs/bbcinternet/2010/07/formative_user_research_for_th.html</guid>
	<category>user experience &amp; design</category>
	<pubDate>Tue, 13 Jul 2010 14:50:00 +0000</pubDate>
</item>


</channel>
</rss>

 
