On Monday, I travelled down to the beautiful city of Bath to attend The Big M — “a brand new independent mobile focused event aimed at those who want to learn from and connect with the very best people in the industry.”

This was a single track conference with around 200 developers and business people in attendance.

Raam Thakrar — App distribution and monetisation – the only things more important than lines of code

Raam is keen on the business of distributing and monetising mobile apps. His business is an m-commerce startup selling physical photo postcards taken and ordered directly from the phone. He is very interested in cutting deals with carriers to ensure his app is preloaded on as many handsets as possible and integrated into the camera and gallery.

He believes that mobile developers should be treated like rockstars. Hmm. Well paid like rockstars at least — $120k+ per year after 5 years experience or put down your laptop and walk away.

Soundbites:

• If you are not going to rule the world – go home. Have those ambitions!
• Making an ROI on apps is very difficult without the help of a distributor
• Develop an app that makes the phone look awesome

Aral Balkan — Beyond Usability on Mobile

Aral is a very slick presenter. An inspiring guy who knows a thing or two about usability and designing a “magical” user experience.

He discussed real world experiences with bad or inconsistent design e.g. on trains and hotel elevators. Then moved on to discuss the reasoning behind design decisions on his iPhone apps. e.g. ease of use over oAuth on his twitter app feathers and “delighters” — extra layers of detail which give joy to the user.

He also warned that the user experience is only as good as the weakest link. e.g. reviews of feathers have nose-dived after the change to the twitter API.

Soundbites:

• Why are we willing to pay extra for a particular commodity? The differentiating factor is user experience
• User experience is a cross-cutting concern. You either have a focus on it from the top of your business or you don’t
• Design is not democratic – it is a dictatorship if you want to stay focussed on simplicity

Bruce Lawson — Web Anywhere

Bruce gave a whistle-stop tour of his recent SXSW talk. It was a great introduction for people who need to catch up on what HTML5 + CSS3 + JavaScript have to offer you and some very handy hints.

He crammed in a massive amount of information considering the time he had. Topics covered included responsive web design, progressive enhancement, HTML5 forms, application cache, W3C widgets

Soundbites:

• Refactor for a small screen, don’t dumb down for mobile
• If your javascript must be in the header, put it after the CSS so you don’t see unstyled content whilst it loads
• Most of that works in the 4 modern browsers, and it works in IE9

See the slides:

Ewan MacLeod — State of the Union – Mobile Address

Ewan is not a happy man. In fact he is very angry. Angry at mobile carriers. Angry that the world does not work the way he wants.

Update: Doodle by @wordbeard

Ewan made a lot of very good points about the current state of mobile, but he needs to deal with himself. He seems to want everything in life reduced down to a cold, hollow transaction.

He seems happier to trust the information accessed from his handset than discuss matters with real life people. It seems that he’s trying to strip the humanity out of his life. Let’s hope that people like Aral can inject some back in via decent usability and “delighters” in the apps on his handset.

To be fair, Ewan was really just looking for a response from the audience. From what I could see, the audience looked a little nervous.

In many ways, he reminds me of my driving instructor who told me “If they leave the car crying or calling me a bastard, at least I know they listened”.

I’ll remember his points, so his shouty delivery must have worked on some level.

See the slides:

Paul Golding — Future Innovations in Mobile

This was the highlight for me. A great talk from a man with buckets of experience — 21 years working with mobile, 16 patents in GSM, PhD in AR.

This touched on so many areas of importance for start-ups and not just those devoted to mobile.

Soundbites:

• Be the first to win, not to market
• ROI of doing nothing is nothing
• Code towards customers
• Innovate where it matters
• Think biz models, not technology
• Try Osterwalder’s biz model canvas

See the slides and explore the references:

My Verdict

The lack of wifi meant it was a real dog-fooding experience for the mobile industry. O2 provided very patchy coverage, so I’ll concede that Ewan had a good point in some of his ranting. On the other hand it’s good to disconnect from time to time.

It was a thought provoking day that gave me plenty to reflect on during the long drive back to Nottingham afterwards. I’ll be picking over the sources for Paul Golding’s talk for a little while yet.

It also gave my a great opportunity to finally visit the Roman Baths whilst I was in the city. Thanks to Mike Ellis and co for a great day.

Please fix the search UI in Safari on the iPhone.

I’ve been using the iPhone for some time now and overall, the interface is really slick. The buttons are consistently placed and this gives a really strong user experience. Everything appears to be in the obvious place.

The trouble is, I like to search the web and it looks like you’ve forgotten your own iPhone user interface rules for this area.

Let me explain

In all your other applications, the primary action button is located top-right with a secondary action button top-left.

Here’s some examples:

You get the picture, right?

Over time the user learns this convention and without realising it assumes that the top-right button means “OK”, “Submit”, “Search” or whatever the primary action is.

Now, let’s have a look at the Safari search screen

What’s in the top-right button position?

It’s the “Cancel” button i.e. the secondary action.

Oh dear. How did that get there?

At first, I thought that I was at fault because I hadn’t properly learned the interface. Then I remembered one of the first observations you make when usability testing. Users blame themselves for the mistakes in the design of the interface.

That the reason I was making the mistake so often was precisely because I had learned the conventions of the user interface.

So what can we do?

The interface needs a subtle redesign. Nothing major, just an increment to correct the problem.

There are 2 options that immediately spring to mind

Option 1: Move the Cancel button to the top-left “secondary action” position

This should be really easy. The basic premise of the current design is left intact and the secondary action is returned to the correct place in the interface – the top-left position.

Option 2: Add a “Search” button in the top-right position and move the Cancel button to the top-left “secondary action” position.

We’ve got an additional button now, but it’s consistent with the overall design of the other apps you produce.

I know you’re really busy right now, especially with all the activity around the iPad, but please fit this into the next version of the OS. It is such a minor UI change, but would markedly improve the way the browser search interface works.

Best of luck with iPhone OS 4.0. I hope you bundle some of these ideas, but don’t worry too much about Flash.

David

P.S. If you can’t manage this for me, then I’d be happy to settle for Opera Mini being approved in the App Store instead – I quite like the idea of being able to browse 6 times faster than Safari.

Image credit: UK stamp

Here are the slides from a talk I gave at the European Luminis User Group in Nottingham last week.

Outlined are some thoughts behind reusable UI elements in the Luminis portal at the University of Nottingham.

I love Confluence. It’s simple. It’s easy to use. It’s hierarchical, so you can build a nice structure.

But…

I hate Confluence. I can’t find anything. Ever. It’s hierarchical, but which branch in the hierarchy is my content located in? Damnit, the Lucene powered search doesn’t seem to be able to find what I’m searching for.

My main gripe with Confluence is that by default it uses breadcrumb trails as primary navigation contrary to breadcrumbs best practices. They are no replacement for the real deal.

Breadcrumbs are secondary navigation designed as an alternative to the main navigational scheme. As such they give no context to relate the current page to others at the same level in the hierarchy. Breadcrumbs cannot aid in navigation within a level. So using breadcrumbs as primary navigation leads to a lack of awareness of the structure of the website/wiki space and thus confusion.

With this in mind, I decided to add a consistent primary navigational scheme to our global Confluence template. As Atlassian have in the past been known to change the templating scheme a little on upgrade to newer versions of Confluence, it is important to limit the changes to be as minimal as possible to limit ongoing templating maintenance issues.

Templating changes

These are limited to…

• Replace the main content div with a 2 column table based layout (I know, that’s a somewhat naughty, but I’m a realist and in a hurry – Confluence already uses tables for some aspects of layout)
• Add a {pagetree} to the left hand column for primary navigation
• Replace a few icons in the {pagetree} macro to be a bit more Mac, a bit less Windows
• Add a custom/override stylesheet

I’m using the {pagetree} macro, but I’m not overly fond of it. Ideally, I’d like it to expand siblings and children of the current page by default. But again, I’m not interested in rolling my own navigational system. Rather I’ll make do and mend what’s available. It does an adequate job, but looks a bit ugly.

Edit Site Layouts | Page Layout

Find this content div:

<div id="content" class="page $!mode">
	...
	...
	...
</div>

Replace it with a table

<table id="myContent">
	<tr>
		<td class="myNavigation">$helper.renderConfluenceMacro("{pagetree:root=$space.homePage.title|startDepth=1}")</td>

		<td id="content" class="page $!mode">
			...
			...
			...
		</td>
	</tr>
</table>

I’m not proud of adding a table for layout, but it much less bad than the markup I’ve seen produced by some third party theme building plugins.

Global Stylesheet

Add a custom/override to the default stylesheet:

body {
	width: 90%;
	min-width: 750px;
	/*max-width: 1000px;*/
	margin:0 auto;
	height: 100%;
	background-color: #fff;
}
h1, h2 ,h3, h4 {
	font-family: Calibri, Arial, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.25;
	margin: 0 0 .25em;
}
#header {
	margin: 0;
	padding: 3px 6px;
	background: #fff url(/images/my-images/backgrounds/menus/blue03.png) repeat-x;
}
#main {
	border: 0;
	padding-top: 30px;
}
#com-atlassian-confluence h1#title-heading img.space {
	margin-right: 10px;
	margin-left: 320px;
}
#myContent, #myContent  td {
	border-collapse:collapse;
}
#myContent, #myContent td td {
	border: 0;
}
#myContent {
	margin: -87px 0 0 0;
	background-color: #fff;
}
#myContent tr {
	vertical-align: top;
}
#myContent .myNavigation  {
	width: 270px;
	min-width: 270px;
	padding-top: 100px;
}
#myContent .myNavigation a {
	text-decoration: none;
}
#myContent .myNavigation ul ul {
	padding-left: 0;
	border-top: 1px solid #ccc;
}
#myContent .myNavigation ul ul ul {
	padding: 0;
	border: 0;
	margin: 10px -8px 0 -8px;
}
#myContent .myNavigation ul ul ul ul {
	margin: 0;
	padding: 0;
}
#myContent .myNavigation ul ul li {
	border-bottom: 1px solid #ccc;
	padding: 8px 8px 0 8px;
	background: #fff url(/images/my-images/backgrounds/menus/grey01.png) repeat-x;
}
#myContent .myNavigation ul ul ul li {
	border: 0;
	padding: 3px 8px 3px 20px;
	background-color: #ccc;
	background-image: none;
}
#myContent .myNavigation img {
	margin-right: 2px;
}
#myContent .myNavigation span img {
	display: none;
}
#myContent #content {
	padding: 100px 10px 10px 50px;
}
#myContent #content #editpageform {
	width: 100%;
}
#myContent #content .page-metadata {
	color: #999;
}
#myContent #content .wiki-content > .panelMacro {
	margin: 10px 0;
}
#footer {
	display: none;
}

Additional and replacement images

I’ve replaced the following images used by {pagetree}.

• /images/icons/tree_plus.gif
• /images/icons/tree_minus.gif
• /images/icons/tree_square.gif

This will have the side effect of making all {pagetree} icons more pleasing to look at.

I’ve added the following backgrounds:

• /images/my-images/backgrounds/menus/blue03.png (for the breadcrumb trail /search bar)
• /images/my-images/backgrounds/menus/grey01.png (for the primary/left-hand navigation)

Resulting Look and Feel

This is just a work-in-progress, but gives a marked improvement in usability due to the enhanced navigation.