• Mobile sites and responsive design: Part 1
• Claim your 25 percent discount for the full book (sorry, only available for European readers).
A user-centered approach to mobile sites
Just like all web design, all mobile site design and planning should start by considering some key questions. What are our business objectives and how does our mobile approach tie in with this? What are the users’ requirements and how can we help them achieve these requirements using a mobile site? Once we are sure that these two questions are answered and aligned we can then start to build our mobile site.
However, we always need to remember much of the design process is based on theory, planning and assumptions (no matter how well researched this work is). Therefore we need to make sure we factor in user testing and ongoing improvement into our mobile site development process.
Current situation and business objectives
Although it may seem strange to suggest the first step of a user-centered approach is to think about business objectives, we need to frame the entire process. We need to consider how a mobile site aligns with our over-arching business objectives and define the purpose for which it exists. It is very easy to create mobile sites, apps, use social media or carry out any digital activity for the sake of doing it, rather than actually having a clear alignment with business objectives.
It may be that a mobile site is essential to help potential customers research our products and services effectively. It may be that the functionality we offer gives the user something useful that helps bolster our value proposition in the market. Whatever the business objectives, this should frame our plans and can help inform budgetary decisions and help us get internal buy-in where needed.
We should also at this stage benchmark our current situation and the environment we are working in. Some of the questions you need to answer are suggested below:
- How does a mobile site align with my business objectives?
- How much of our existing traffic is on mobile devices?
- What is the current mobile experience?
- How do we currently rank in the search engines for mobile
search? - What do our competitors offer via mobile sites?
- How do our competitors rank in the search engines for mobile
search? - What resources do we have, what can we commit and what
will be the ongoing requirements? - What skills do we have in-house and what partnerships do
we have to achieve this project?
Once we have benchmarked our current situation we can move on to trying to understand the potential mobile site user. Always remember though, this should be seen as an iterative process, and you may need to revisit this step a number of times as new questions and challenges arise.
User requirements
At this stage we get into the essential process of trying to understand the key user requirements. There is enough theory on this topic to fill the rest of the book very easily. Don’t worry, we won’t do that. We’ll focus on the key issues, best practice, and point out some great resources on the topic.
My favorite resource on all things about usability by the great company
WebCredible.
There are a number of theories on how best to understand user requirements, so I’ve highlighted some key options below. Essentially we are trying to understand the tasks mobile site users will be carrying out and what their end goals are. Once we understand this, we should be able to develop a mobile site that helps the user to carry out these tasks and achieve their goals in the most effective way possible.
1) Personas
Personas are fictional characters that try to encompass as many of the characteristics of the target audience as possible. Any set audience may encompass a number of different personas, and these personas can be created to varying levels of detail.
A basic persona may just include things like key needs, desires and motivators, whereas a very detailed persona may be given an elaborate background story including work details, family, personal values and demographics like age and location.
The aim of the persona is to give us something to test our mobile designs against and allows us to ask some key questions. Would the design we have suggested match the needs of this persona? How would the needs of different personas vary, and how does this impact our design?
The following is a very brief example persona. It describes an individual and highlights the key issues in their life that may impact what they want and need from any particular mobile site:
Example persona Susana is a mid-thirties professional woman with two children and a very busy life. She is technically savvy and an early adopter of many technologies. She needs the technology she uses to be reliable and robust as it is used during work and family time. Her key motivators are lack of time, need to balance work and family life, as well a desire to be stylish and express her creative side.
So from this example we can start to make a number of assumptions about what will be important in our mobile site. The context of how this persona will impact our design will depend on our business objectives and the scenario we are working within.
2) Scenarios
Scenarios are imagined circumstances in which we place our personas, and map out the key circumstances, needs and activities that may occur. This means as well as using the persona to understand individual needs, the scenario gives us the context. This can include things like physical location at a particular time, a set of circumstances or events, as well as external factors such as time pressures.
Example scenarioYour persona is travelling to a business conference and needs to find out as much about your organization as possible while travelling and at the conference. The conference itself is only for a few hours and there is limited internet connectivity.
From this scenario we can see that ease of navigation (due to using a mobile device while travelling), prioritization of content (due to limited time) and a focus on fast downloads speeds (due to limited bandwidth), will all be important.
3) Use cases
A use case is a step-by-step description of the interaction between the persona and the mobile device/mobile site. This allows us to map how the device and mobile site will be interacted with, click by click. It also allows us to see the steps that are being taken by the persona and to understand how the flow of a particular task can be optimized.
Example use case
• The user searches for the company name on their device in Google.
• The Google search returns results with the company name.
• The user clicks on the company search result.
• The mobile version of the website is loaded.
• The user then clicks on the menu to find the ‘About Us’ section of the site.
• The About Us page loads.
• The user scans the page to look for key information.
• The user clicks on the ‘Find Us at Conference X’ logo.
• A PDF document is downloaded showing stand location.
This use case serves a number of purposes. It gives us something with which to explore how the user will interact with the site and what the ideal steps are to achieve the user’s objectives. It also allows us to consider the scenario in more detail and consider how this will impact the functionality and design that we must provide.
Once we have fully defined our user requirements we can then move into the next stage of implementation. Bear in mind though, that up until this stage, all of our planning, even if detailed and well thought out, is mostly based on assumptions.
Define, design, develop, validate, iterate
This stage of the process is all about testing our assumptions in the real world. We use the previous two stages (current situation and user requirements) to help us define what our mobile site should do, and how it should do it. We then look at the output from the user requirements stage in more detail and use this to design our mobile site.
The initial design should take the form of a prototype. A prototype is a version of the site that has not required full development but gives us enough to start testing our assumptions. We can then take this prototype and test it against the personas, scenarios and use cases we have developed. This will allow us to start to iterate our ideas and improve them according to all of the research and planning work we have already done.
We may also be able to use these prototypes (which may be just wireframe sketches of what the site will look like and how pages are connected to one another) and test them in the real world. An interview process with some members of our potential audience can help us test and improve our ideas further.
Wireframes are representations of what your site will be laid out like, showing the key elements of the page without any detailed design. These wireframes can be highly effective in mapping out ideas, before we get distracted by the graphical design elements of our sites. Clickable wireframes allow us to click through these wireframe diagrams and see how pages are connected to one another. This can allow for a basic form of user testing to see if navigation aligns with users’ expectations. My favorite wireframing tool is Balsamiq Mockups. It’s easy to use and allows you to create clickable wireframes very quickly.
At this stage, when we are happy we have refined and revised our plans as much as possible, we then commit to the development of our mobile site. We hold back on this stage, until we are sure we have thoroughly tested our assumptions, because changing things after the development stage can become expensive, whereas changing at the prototyping stage is generally far lower cost.
Only once we are happy with the layout and functionality, and we have tested our designs against our assumptions, should we start thinking about graphic design. When I say graphic design, I am referring to the visual identity graphical elements of our mobile sites. I say this because if we go out and ask a designer to mock up our site early on in the development process, it is very likely that we are going to get distracted by these designs. The reality is that a user-centered approach should consider functionality first; then graphic design when applied to this can enhance and improve it. However, the most beautiful site in the world will be useless if you don’t get the functionality right.
I am certainly not dismissing graphic design as unimportant. I actually believe that the visual elements of a site can enhance the functionality massively when thought out correctly. We just shouldn’t decide what something should look like, before we know what it does.
The final stage after prototyping is development, when we actually start to build our sites. No site is ever completed, mobile or otherwise. The first iteration of your site should be just that: an iteration. Even when you get to what you believe is the final version of your site, soon enough the environment in which you are operating will change and you will need to start testing, changing and improving again. From a budgetary perspective I never look at web development as a one-off cost. It should be something that is budgeted for as an ongoing cost and a project that is always developing.
The sooner you can get real users trying out your site the better (in controlled circumstances!). What I mean is that when you have a version of your site that is useable, even if it is unfinished and still has bugs, invite some users to try it out. Since there may be lots of problems still with the site, you may wish to do this on a one-to-one basis. My general experience is that even fairly basic usability testing, like asking a number of people to carry out the same task, will highlight key issues with your designs.
So you work towards a ‘final’ design, test, learn and improve on an ongoing basis. At some point you must decide to go ‘live’ and release your new mobile site into the world. Make sure that there are easy ways for users to feed back to you, so you can continue to improve things.
Testing on mobile devices
There is no true alternative for actually testing on each of the mobile devices you are expecting your audience to use. However, there are a number of great online services that can help you test your mobile sites out if you don’t have access to the particular device you need.
A good place to start is to look at your existing web analytics (assuming you have some) and looking at what mobile devices your existing site is being accessed on. This will give you an initial hit list of what devices you need to test first.
Google’s GoMoMeter gives you an indication of what your site is going to look like. It’s limited to simulating a single mobile device, based on an Android phone, but it is extremely easy to use.
Mobile Phone Emulator offers a whole range of different devices that you can simulate, allowing you to see what your site will look like on various platforms. It also has settings so that it can display these in real-life size on your computer screen.
Ongoing maintenance
Once you achieve your beautifully planned and designed mobile site, you need to remember that you must commit to ongoing maintenance. With the world of mobile marketing moving so quickly, new devices, operating systems and changing user requirements are going to mean your site needs to change. If you don’t adjust, what was a perfect site will in a short period of time become a business problem.
Mobile sites: conclusions
As you can see, there is a lot to consider when building mobile sites.
You need to understand the technical aspects of mobile sites, but most importantly you must think about the reasoning behind the site in the first place. Poor use of technology can ruin an otherwise well-thought-out mobile site, but a site without a user-centered design approach is unlikely to stand a chance in the first place.
You have been reading the second part of a 19 page exert from Daniel Rowles’ excellent new book: Mobile Marketing: How mobile technology is revolutionizing marketing, communications and advertising.
• Mobile sites and responsive design: Part 1
• Claim your discount for the full book (sorry only available for European readers).
• Targetinternet.com (Daniel Rowles’ Website) for examples of mobile sites and to see responsive design in practice.
Don’t miss:
• Mobile SEO best practices for 2014
• Guide to mobile industry awards • Check out the latest video case studies.
• The insiders’ guides to world’s greatest mobile markets • Latest: Germany
• Guide to mobile agencies • Latest profile: XS2
• Guide to mobile ad networks • Latest profiles: DMG • Twinpine
• Mobile events 2013 • best conferences, great discounts and free tickets •
• The big compendium of global mobile stats
Leave a Reply