If your website looks the same on a smartphone as it does on a computer, you’ve got a problem.
The latest data from a study shows that almost 25% of the 35% of Americans who own smart phones, use their phone as their primary way of accessing the Internet:
the Pew Internet Project finds that one third of American adults – 35% – own smartphones. The Project’s May survey found that 83% of US adults have a cell phone of some kind, and that 42% of them own a smartphone. That translates into 35% of all adults.
Our definition of a smartphone owner includes anyone who falls into either of the following two categories: One-third of cell owners 33% say that their phone is a smartphone. Two in five cell owners 39% say that their phone operates on a smartphone platform these include iPhones and Blackberry devices, as well as phones running the Android, Windows or Palm operating systems.
Several demographic groups have high levels of smartphone adoption, including the financially well-off and well-educated, non-whites, and those under the age of 45.
Some 87% of smartphone owners access the internet or email on their handheld, including two-thirds 68% who do so on a typical day. When asked what device they normally use to access the internet, 25% of smartphone owners say that they mostly go online using their phone, rather than with a computer. While many of these individuals have other sources of online access at home, roughly one third of these “cell mostly” internet users lack a high-speed home broadband connection.
via Smartphone Adoption and Usage | Pew Research Center’s Internet & American Life Project.
The use of WordPress as a CMS (content management system) makes it easy to have your content display one way for a computer screen and a different way for a phone or tablet through the use of simple plugins.
- For tablets, OnSwipe is a solid solution that gives your site a magazine feel.
- For phones, WPTouch is a bit of a pain to configure but does the job.
There are also some themes that are purely built for mobile, but, that’s information for another post.
While many of you are here to learn about using Open Source Content Management Systems- which generally give you a pretty good, standard, accessible and easy to use user interface which provides a user experience that works- some of you like to bend and sometimes break a perfectly good system with your ideas of what a site should or could do.
And for you- I gathered some resources so you can learn the ins and outs of what UI and UX is all about- from other folks of course- because while we understand good UI and UX – we don’t love reinventing the wheel.
What is a UI spec:
- An up-front encapsulation of features
- Hierarchical or interrelational maps or diagrams of the system
- Interaction flow diagrams (with varying degrees of fidelity from wireframes to full screenshots). These would also have a lot of descriptive text and callouts for explaining and directing.
- Full-scale/resolution state screens (when appropriate)
- An index of all individual implementable graphic resources, along with location coordinates (if necessary) and behavioral documentation.
Or-
- A functional specification describes how a product will work entirely from the user’s perspective. It doesn’t care how the thing is implemented. It talks about features. It specifies screens, menus, dialogs, and so on.
- A technical specification describes the internal implementation of the program. It talks about data structures, relational database models, choice of programming languages and tools, algorithms, etc.
Why do we write a spec: http://www.joelonsoftware.com/articles/fog0000000036.html
It would help in the design process to have:
- An area to create and directly edit a collaborative document
- An area to discuss the contents of the documents, be it inline commenting or a discussion section.
Some great reading on the subject:
The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) (Voices That Matter)
– great overview of the breadth and depth of the concerns of user experience and our process.
Subject To Change: Creating Great Products & Services for an Uncertain World: Adaptive Path on Design
– great summary of our field’s view of the value of design-driven product and service development
Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies)
– the importance of visualizing our ideas throughout the software development lifecycle
Observing the User Experience: A Practitioner’s Guide to User Research
– great methods for your toolkit, like user interviews, contextual inquiry, usability testing, and card sorting.
Design Is How It Works: How the Smartest Companies Turn Products into Icons
– case studies in applying design holistically to companies, products and services
The Design of Business: Why Design Thinking is the Next Competitive Advantage
– highlights how organizations can use design thinking for a competitive advantage;
The Experience Economy, Updated Edition
– this book is over 10 years old but still very current (this link is to an updated edition). It’s about staging experiences that are focused on people.
this list via What a BA should know about the UX profession: Interview with Patrick Quattlebaum.
Our own contributions:
Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) (Voices That Matter)
– by Dan Brown
Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
– One of our favorite introductions to usability.
And- in the end, why do you do this? To quote Joel Spolsky:
UI is important because it affects the feelings, the emotions, and the mood of your users. If the UI is wrong and the user feels like they can’t control your software, they literally won’t be happy and they’ll blame it on your software. If the UI is smart and things work the way the user expected them to work, they will be cheerful as they manage to accomplish small goals. Hey! I ripped a CD! It just worked! Nice software! Wooooooooooo!
To make people happy, you have to let them feel like they are in control of their environment. To do this, you need to correctly interpret their actions. The interface needs to behave in the way they are expecting it to behave.
Thus, the cardinal axiom of all user interface design:
A user interface is well-designed when the program behaves exactly how the user thought it would. As Hillel said, everything else is commentary. All the other rules of good UI design are just corollaries.
From his post: Controlling your environment makes you happy.
You now enough to be dangerous. Go reinvent the wheel- just make sure they don’t have to read the manual.
You know the millions of dollars Rupert Murdoch spent designing “The Daily” for iPad- and Conde Naste and all the other publishers? Yeah, well a free plugin for your wordpress install makes your site sexy like a magazine app- with a quick click of the install button: either go to your plugins and search for it- or go to the addon page Onswipe
It’s been rolled out to all the wordpress.com sites- and is supported by Automattic– the people who manage the WordPress project. From their blog:
With the launch of Apple’s iPad we have seen the future of computing and it is touch. Nothing matches the visceral feel of navigating your digital world with your hands. The past four months we’ve been working closely with Onswipe to bring your iPad visitors our vision of what a blog can look like re-imagined for a touch experience.
Our iPad-optimized view is app-like in its functionality, but pure HTML5 goodness on the backend: it supports touch interactions, swiping, rotation, and many other features of the iPad….
There are some fun options to play with too. If you browse to Appearance -> iPad in your Dashboard you can:
- Have the theme use an image from your recent posts as a cover.
- Upload a logo to showcase your brand or personality on the cover.
- Upload an image to be used as a loading graphic when visitors add your site to their home screen.
- Switch fonts.
- Choose from 9 different skin colors, to best match the feel of your site.
- Enable or disable the whole thing.
When you tap to view a post, you get to see the full content with a slick commenting interface and social sharing tools for Twitter, Facebook, and WordPress.com literally at your finger tips. It’s a lot of fun browsing sites with Onswipe.
On WordPress.com we’re seeing about 750,000 page views a day from iPad visitors and it continues to rise. New tablet devices seem to be coming out every time you turn around. In the coming months we’ll be expanding to work with other popular tablet devices, but we chose to focus on the iPad first because… well it’s cool.
The beauty of the perfect implementation of good code that separates the content from the presentation- as WordPress does so well, is it is easy to reformat your content multiple ways- and for multiple devices (the exact opposite of sites built in Flash). Due to the huge installed base of WordPress sites- the developments and goodness come all that much quicker than they do for other open source CMS systems- and blow the doors off proprietary code bases.
I’ve installed it on www.esrati.com for a test – so if you have an iPad, go check it out. Of course, if you don’t have an iPad, you won’t get the dreamy effect.
This is just one more reason- that looks of your site- aren’t as much of an issue as content. So get busy- install it- and write some new posts.