Before I got my Q, I could only imagine what a mobile user's experience was like through my emulators. Emulators alone though are not enough to get a feel for the true mobile experience.
As many of you know, I'm on Twitter quite a bit. As much as I use the site for communication, I pay attention to interfaces as well. For example, on the mobile version of the Twitter page, pressing 0 takes you to your home, where all of your friends' tweets show up. However, let's say you want to find someone you're following who hasn't tweeted in awhile, then you would press 2 for the people you follow and navigate to the person that way. If the person you're looking for isn't on your first page of followers, you can press 6 to go to the next page. But if you think you passed them up on the last page, you could press 4 to go back a page.
The menu at the bottom of the mobile site has caught my attention quite a bit. In code that I'm launching tomorrow, I'm hoping to include my last minute idea - implementing a mobile menu inspired by the one on Twitter.
A few of the pages that I maintain are quite unruly in length, at least for a mobile user. So my goal is to include links to make it a little more manageable. Adding a mobile menu would definitely make it a little easier for users to navigate.
I can't link to my project here, but I can give you an example of what I'm doing.
I have a piece of software that interacts with various brands of hardware. One of the pages is a list of all the pieces of hardware that are compatible with the software. Right now, we have it set something like this:
IntroductionNotes notes notes...
Page navigationCompatible HardwareList that scrolls on forever and makes it unbearable for mobile users who want to see the notes at the bottom of the page
TestingHow to check your hardware
NotesLegalese, disclaimers, and final notes.
As a mobile user, if I currently want to read the notes at the bottom of the page, I'd have to scroll through the list of compatible hardware, which would take a minute or two. That list is only going to grow, making the experience even longer for mobile users if I left the page as it is.
So for my mobile users, I'm implementing a menu that would look like this:
So how do you make a menu for mobile users?
It's simple HTML, using the
accesskey attribute of the
<a> tag. For my example, it could look like this:
<a href="#top" accesskey="0">[0] Return to the top</a><br />
<a href="#intro" accesskey="1">[1] Introduction</a><br />
<a href="#nav" accesskey="2">[2] Page Navigation</a><br />
<a href="#compat" accesskey="3">[3] Compatible Hardware</a><br />
<a href="#testing" accesskey="4">[4] Testing</a><br />
<a href="#notes" accesskey="5">[5] Notes</a><br />
Thanks to my phone, I now understand the joys and frustrations of being a mobile user. Since I am more aware of the mobile user experience, experiencing it firsthand, I can now consider making our designs more mobile-friendly. We'll see over the next few months how my work website evolves in catering to our mobile users.
Labels: mobile, mobile menu, mobile-friendly, Twitter