<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	     xmlns:dc="http://purl.org/dc/elements/1.1/"
	   xmlns:atom="http://www.w3.org/2005/Atom"
	     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>How Not To Design A Mobile Site &#8211; TasteLondon &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Fri, 08 Aug 2025 07:02:00 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>How Not To Design A Mobile Site &#8211; TasteLondon &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[How Not To Design A Mobile Site - TasteLondon]]></title>
		<link>https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/</link>
					<comments>https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Sat, 08 Aug 2009 08:51:59 +0000</pubDate>
				<category><![CDATA[mobile]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[food]]></category>
		<category><![CDATA[restaurant]]></category>
		<guid isPermaLink="false">http://shkspr.mobi/blog/?p=383</guid>

					<description><![CDATA[I&#039;m a huge fan of TasteLondon.  Their card gives discounts in hundreds of restaurants around London.  It&#039;s saved me quite a bit of money  and I really recommend the service to anyone who likes eating out.  TasteLondon Logo  There is a small problem with it, though.  The directory of restaurants it covers is a fairly heavy paperback book  Rather inconvenient to carry around on the off chance that y…]]></description>
										<content:encoded><![CDATA[<p>I'm a huge fan of TasteLondon.&nbsp; Their card gives discounts in hundreds of restaurants around London.&nbsp; It's saved me quite a bit of money&nbsp; and I really recommend the service to anyone who likes eating out.</p>

<p></p><div id="attachment_397" style="width: 310px" class="wp-caption aligncenter"><a href="http://www.tastelondon.co.uk/"><img aria-describedby="caption-attachment-397" class="size-medium wp-image-397" title="TL_logo_web_large" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/TL_logo_web_large-300x139.jpg" alt="TasteLondon Logo" width="300" height="139"></a><p id="caption-attachment-397" class="wp-caption-text">TasteLondon Logo</p></div><p></p>

<p>There is a small problem with it, though.&nbsp; The directory of restaurants it covers is a fairly heavy paperback book&nbsp; Rather inconvenient to carry around on the off chance that you fancy popping out for some dinner .&nbsp; They do have a rather good website - <a href="https://web.archive.org/web/20090714182943/http://www.tastelondon.co.uk/">tastelondon.co.uk/</a> - but it doesn't work on mobile. Nope. Not even if you've got a Cadbury's iPhone.</p>

<p>Last year <a href="http://twitter.com/edent/statuses/1061047023">I asked TasteLondon if they were planning on developing a mobile site</a>.&nbsp; They said "yes" and here it is.&nbsp; It's a textbook example of how <em>not</em> to design for mobile.&nbsp; Let me take you through it.</p>

<h2 id="where-is-it"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#where-is-it">Where is it?</a></h2>

<p>How would you expect to get to the TasteLondon mobile site?&nbsp; Their <a href="https://web.archive.org/web/20100214121216/http://www.tastelondon.co.uk:80/article.php?id=103">news page annouces the service</a> <strong>but doesn't give the URL</strong>! The site is meant to auto-detect a mobile browser but failed to do so on BlackBerry or Android.</p>

<p>I tried guessing the URL.&nbsp; Was it m.tastelondon.co.uk? Perhaps mobile.tastelondon.co.uk? Surely not wap.tastelondon.co.uk? I know tastelondon.mobi? Nope - none of those.&nbsp; After much perseverance I discovered it was <a href="https://web.archive.org/web/20090812022014/http://www.tastelondon.co.uk/iphone">tastelondon.co.uk/iphone</a></p>

<h2 id="solutions"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#solutions">Solutions</a></h2>

<ul>
    <li>TELL YOUR CUSTOMERS WHERE YOUR SITE IS!</li>
    <li>Mobile detection is hard.&nbsp; You can use services like <a href="http://deviceatlas.com/">DeviceAtlas</a> or <a href="http://wurfl.sourceforge.net/">WURFL</a> to detect if a device is mobile.</li>
    <li>Always offer a link on your main page just in case your detection is wrong.</li>
    <li>If there are several standards, make sure you redirect your customers if they go to the wrong URL.&nbsp; A simple redirect in .htaccess would have send everyone visiting the m.tastelondon URL to the correct location.</li>
    <li>Don't choose technology specific names in your addresses.&nbsp; /iphone would indicate that you're not interested in the hundreds of millions of devices which aren't made by Apple.&nbsp; While the iPhone is popular now - will it be in a year's time? Choose something vendor neutral.</li>
</ul>

<p>So, here's the front page on my BlackBerry.</p>

<p></p><div id="attachment_386" style="width: 490px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-386" class="size-full wp-image-386" title="Capture8_49_54" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/Capture8_49_54.jpg" alt="Front Page - KISS" width="480" height="320"><p id="caption-attachment-386" class="wp-caption-text">Front Page - KISS</p></div><p></p>

<p>I quite like this.&nbsp; It's simple.&nbsp; There's a link back to the full site.&nbsp; The bold indicates that I'm in simple search and, if I want, I can go to Advanced Search.&nbsp; I wouldn't have made "Simple Search" a link as I'm already here.&nbsp; Overall, not bad.&nbsp; Let's see what the search results are like.</p>

<h2 id="javascript"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#javascript">JavaScript</a></h2>

<p>So, I hit the button and what do I see?</p>

<p></p><div id="attachment_385" style="width: 490px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-385" class="size-full wp-image-385" title="Capture8_49_14" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/Capture8_49_14.jpg" alt="JavaScript" width="480" height="320"><p id="caption-attachment-385" class="wp-caption-text">JavaScript</p></div><p></p>

<p>Don't get me wrong, I love JavaScript. It does all sorts of amazing things and usually makes usability a lot better.&nbsp; But on mobile?&nbsp; True, many newer high-end phones have JavaScript - but literally <em>billions </em>don't.&nbsp; Why would you alienate so many potential customers?</p>

<p>What makes it worse, is that this is a simple form.&nbsp; We've had forms on the web since its inception.&nbsp; It's a standard HTML element.&nbsp; Why would a simple search box need JavaScript?</p>

<h2 id="is-it-necessary"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#is-it-necessary">Is It Necessary?</a></h2>

<ul>
    <li><acronym title="Keep It Simple, Stupid">KISS</acronym></li>
    <li>If you're desperate to use a whizzy new feature - check how widely supported it is.&nbsp; Make sure there's a fallback option for those users who won't or can't upgrade.</li>
    <li>Whenever you create a new service, test it as thoroughly as possible.&nbsp; Remember, you are probably not your typical user.&nbsp; Find out what technology your users have and design for them - not for what's "cool".</li>
</ul>

<p>Ok, let me grab my Android handset and carry on testing...</p>

<h2 id="where-am-i"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#where-am-i">Where am I?</a></h2>

<p>So, I've just arrived at Waterloo Station when I see all the trains home are cancelled.&nbsp; Let's grab a bite to eat nearby.&nbsp; I'll search for Waterloo.</p>

<p></p><div id="attachment_394" style="width: 330px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-394" class="size-full wp-image-394" title="waterloo" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/waterloo.png" alt="Searching near Waterloo" width="320" height="480"><p id="caption-attachment-394" class="wp-caption-text">Searching near Waterloo</p></div><p></p>

<p>This is what I get back.</p>

<p></p><div id="attachment_395" style="width: 330px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-395" class="size-full wp-image-395" title="waterloo results" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/waterloo-results.png" alt="Results from searching for Waterloo" width="320" height="480"><p id="caption-attachment-395" class="wp-caption-text">Results from searching for Waterloo</p></div><p></p>

<p>There are three serious errors with this page</p>

<ol>
    <li>The result is wrong.&nbsp; I know the postcode of my home and my workplace.&nbsp; I've no idea what the postcode is for anywhere else.&nbsp; Given this is a London based service, I was expecting that a major train station would suffice.</li>
    <li>No feedback on what I've searched for.&nbsp; That search bar should be pre-populated with my search.&nbsp; Just like every other search engine.&nbsp; This gives allows me to correct any misspellings and serves as a reminder of what I was looking for.</li>
    <li>Location.&nbsp; The Prezzo in Peterborough is 265.31 Miles away.&nbsp; Away from where?&nbsp; I haven't given my location and, as far as I can tell, the site hasn't automatically detected it.&nbsp; Where does this figure derive from?</li>
</ol>

<h2 id="user-needs"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#user-needs">User Needs</a></h2>

<ul>
    <li>Think about how the user thinks.&nbsp; Does anyone know the postcode of the pub they're sat in?&nbsp; If you need a street name for accuracy, tell the user.</li>
    <li>Give the user feedback.&nbsp; Keep them in the loop.</li>
    <li>Detect the user's location.&nbsp; This may be complicated for you - but it's easier for the user.</li>
</ul>

<h2 id="success"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#success">Success!</a></h2>

<p>I'll try again.&nbsp; I've got the feeling that I'm in the postal area of W2.&nbsp; Here's what success looks like.</p>

<p></p><div id="attachment_393" style="width: 330px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-393" class="size-full wp-image-393" title="w2" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/w2.png" alt="w2" width="320" height="480"><p id="caption-attachment-393" class="wp-caption-text">Is this as good as it can be?</p></div><p></p>

<p>A really good page.&nbsp; Pretty, well formatted, lots of information.&nbsp; Can you spot the four glaring usability issues?</p>

<ol>
    <li>I can't click on the phone numbers.&nbsp; Some advanced phones will detect the number string and allow you dial it.&nbsp; If not, you've got to find a scrap of paper, scribble down the number, close the browser, go to the phone's dialer and type the number in yourself.</li>
    <li>Where is Craven Hill Gardens? Why not link to Google Maps. Or Yahoo Maps. Or any mapping service.</li>
    <li>What do those icons mean?&nbsp; Anyone already intimately familiar with the TasteLondon system <em>may</em> know what they mean.</li>
    <li>Where do I go for more information?&nbsp; The names of the venues aren't clickable.</li>
</ol>

<h2 id="is-this-as-easy-as-it-could-be"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#is-this-as-easy-as-it-could-be">Is This As Easy As It Could Be?</a></h2>

<p>Make everything as easy as possible for your users.&nbsp; In four simple steps the usability of this site could dramatically be increased.</p>

<ol>
    <li>Make phone numbers easy to dial.&nbsp; Your user is on a phone, they need to book a restaurant, you've given them the number - why wouldn't you make it easy for them to call?&nbsp; You can use <a href="https://www.openmobilealliance.org/tech/affiliates/wap/wap-268-wtai-20010908-a.pdf">WTAI</a> or <a href="http://tools.ietf.org/html/rfc3966">tel:</a> to make it easy for any user to dial the number you've presented.</li>
    <li>Maps.&nbsp; On the desktop, users are quite happy to copy and paste text into another page or application.&nbsp; It's not so easy on mobile. If something can be a link - it probably should be.</li>
    <li>Familiarity. Because we spend all day in our jobs, we often forget that not everyone understands the acronyms and syntax we use.&nbsp; Don't hide behind obscure icons <em>unless</em> you hyperlink those icons to a page describing what they mean.&nbsp; Consider having a "key" or "legend" at the top of a jargon heavy page.</li>
    <li>Have you given me enough information to make a decision?&nbsp; Perhaps I want to see the menu, prices, review or some other information.&nbsp; If the information is available on your main site, it should be available on mobile.&nbsp; This is the central tenent of the <a href="http://www.w3.org/TR/mobile-bp/#OneWeb">One Web</a>.</li>
</ol>

<h2 id="the-tyranny-of-choice"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#the-tyranny-of-choice">The Tyranny Of Choice</a></h2>

<p>Let's pop into Advanced Search.&nbsp; It's fairly comprehensive.</p>

<p></p><div id="attachment_391" style="width: 330px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-391" class="size-full wp-image-391" title="advance search result" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/advance-search-result.png" alt="Advance search result" width="320" height="480"><p id="caption-attachment-391" class="wp-caption-text">Advance search result</p></div><p></p>

<p>There's a sensible amount of options. Availability, Cost, and Offers all have 3 - 4 options.&nbsp; Cuisine obviously has rather a lot of choices - 40 of them from African to Vietnamese. Yummy!</p>

<p>How many results do I want to see?&nbsp; According to TasteLondon, it could be over 500!</p>

<p></p><div id="attachment_384" style="width: 490px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-384" class="size-full wp-image-384" title="Capture7_2_30" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/Capture7_2_30.jpg" alt="How many results" width="480" height="320"><p id="caption-attachment-384" class="wp-caption-text">How many results</p></div><p></p>

<h2 id="rational-choices"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#rational-choices">Rational Choices</a></h2>

<ul>
    <li><a href="https://web.archive.org/web/20130322052452/http://www.scientificamerican.com/article.cfm?id=0006AD38-D9FB-1055-973683414B7F0000">Too many choices can be confusing and distressing for the user</a>.</li>
    <li>How much information does a user want to see?</li>
    <li>How long will it take a user to download 500 results onto their phone?</li>
    <li>If you are going to offer a large results set, give the user a way to sort.</li>
    <li>Rationalise the choices you offer and how you offer them.&nbsp; Is a list the best way? How about radio buttons or check boxes?</li>
</ul>

<h2 id="sharing-is-caring"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#sharing-is-caring">Sharing Is Caring</a></h2>

<p>So, I've found the perfect restaurant for me and my friends.&nbsp; I guess I'd better check that it's OK with them all.&nbsp; How can I do that? I know! I'll SMS them the URL.</p>

<p>Ah... A problem.&nbsp; The URL isn't specific to the restaurant.</p>

<p></p><div id="attachment_392" style="width: 330px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-392" class="size-full wp-image-392" title="URL" src="https://shkspr.mobi/blog/wp-content/uploads/2009/08/URL.png" alt="The Site URL" width="320" height="480"><p id="caption-attachment-392" class="wp-caption-text">The Site URL</p></div><p></p>

<h2 id="take-advantage-of-the-platform"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#take-advantage-of-the-platform">Take Advantage of the Platform</a></h2>

<ul>
    <li>If you want people to visit your site, make it easy for them to share it with their friends.</li>
    <li>Consider having a "Send To Friend" button which will save your users the cost of a text message.</li>
    <li>Create useful URLs. Watch this <a href="http://www.slideshare.net/deanna.marbeck/url-design-for-information-architects-presentation">presentation about URL design</a> or read it direct from the mouths of experts - <a href="http://www.w3.org/Provider/Style/URI">Cool URLs Don't Change</a>.</li>
    <li>For this site, I'd use two different types of URLs.</li>
    <li>The URL for the search page should be similar to <span style="text-decoration: underline;">m.tastelondon.co.uk/?l=w2&amp;c=veg&amp;a=1&amp;c=2&amp;o=3</span> This enables your users to send the message "Hey, which one do you like the best?"</li>
    <li>The URL for each restaurant should be similar to <span style="text-decoration: underline;">m.tastelondon.co.uk/?r=1234</span> This enables your users to send the message "Hey, do you like this restaurant?"</li>
    <li>You can use "<a href="http://deviceatlas.com/properties">smsto://</a>" on some phones to make it easier to send the URL by text.</li>
</ul>

<h2 id="conclusion"><a href="https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/#conclusion">Conclusion</a></h2>

<p>I love my TasteLondon card.&nbsp; It is tremendously valuable.&nbsp; It has paid for itself many times over.&nbsp; The mobile site is, frankly, a bit disappointing.&nbsp; It works - on some phones.&nbsp; It gives me information - but only the bare minimum.&nbsp; It tries to be clever - but gets the basics wrong.</p>

<p>If I were dining on my own, didn't really care about the menu and hoped cabbies knew London as well as they're meant to - this wouldn't be a bad site.&nbsp; I do use it - but find myself skipping into Google Maps and external restaurant review sites.&nbsp; I have to copy and paste details or take a screenshot if I want to share information with friends.</p>

<p>TasteLondon's mobile site has only been live for a few weeks - I look forward to watching its evolution.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=383&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2009/08/how-not-to-design-a-mobile-site-tastelondon/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
