Your SlideShare is downloading. ×
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Mobile User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile User Experience

837

Published on

My talk at Mobile 2.0 Europe, on Mobile User Experience: or more specifically, how we work UX into our product development at Future Platforms, and some lessons we've learned doing this.

My talk at Mobile 2.0 Europe, on Mobile User Experience: or more specifically, how we work UX into our product development at Future Platforms, and some lessons we've learned doing this.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
837
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile User Experience Lessons learned the hard way Mobile 2.0 Europe, 18th June 2009
  • 2. Why bother?
  • 3. It turns out we’re not so different
  • 4. This works for us. Maybe it can work for you.
  • 5. Keep designers, developers and stakeholders close
  • 6. Be constructively self-critical
  • 7. Document pragmatically.
  • 8. Component Detailed Specification Component Name Title Bar Specification Specification Reference CanvasTitleBar Client Client Summary BBC BBC A general title bar to name the canvas currently active.This bar may include pagination to the right hand side when neede may also include prompts for the user, such as arrows to indicate next/previous canvas. Project Project Usage BBC Bitesize BBC Bitesize This is used throughout the application on all screen sizes. It will not be used on the splash screen. States It may display a pagination state depending on where it is in the application. Design Specification Below is an example of the CanvasTitleBar at 240x320. Background blue has a 4px curvature. The width of the menu should be 100% width on the actual screen area (defined in BaseScreenDescription of this document). If possible, the menu items/options should have a padding 2px smaller than the very outermost edge. Inactive Menu Items Ideally the text (CanvasTitleBar_text) should have equal margins at the top, bottom, left. The text should also be aligned Background and highlights, as detailed above. They have an outline color of (#D7F2FF). The two blue colours should be of centrally along the vertical axis . The color of the text is #333333, the weight of the text is bold. It may be necessary to tru equal height. Font colour is #05303E. this text on smaller screens, or define text on a per screen basis. Refer to screen documents for language assets. On som screens, where additional assets are displayed on the right hand side, it will be necessary to limit the width of Active Menu Items CanvasTitleBar_text. Background and highlights, as detailed above. They have an outline color of (#FFFFFF). The two orange colours should be of equal height.Font colour is #FFFFFF. Selection of options Items can be selected via up or down on the D-PAD. There are no transitions when selecting menu items. The menu items have 2px padding between each other vertically Component Name Soft Keys Bar Component Name Base Screen Description Specification Reference CanvasSoftKeysBar Specification Reference BaseScreenDescription Client Summary Client Summary BBC The softkey menu bar, to be displayed at the bottom of the canvas. This will display labels associated with the left soft key BBC The base screen used throughout the application. This includes all components and their positioning on screen. (LSK) and the right soft key (RSK). Directional prompts in the form of arrows may also be displayed in the center of this bar by Usage Project means of graphical assets, although dynamically drawn arrows may be an option. Project This is used throughout the application - there are different descriptions for 176px wide screens and 240px and above BBC Bitesize BBC Bitesize Usage screens. This is used throughout the application on all screen sizes. It will not be used on the splash screen. Design Example States Examples of 240x320 screen, and 176x200 screen. This component has active and inactive states. Active states may include menus and feedback in the form of modal popups. Active states are described in detail in SoftKeyMenu component and ModalFeedback component.This component is activated via LSK, RSK, FIRE, and D-PAD. Design Specification Below are examples of the CanvasSoftKeysBar. The text for the LSK (CanvasSoftkeysBar_LSK_text) should be left aligned with the CanvasTitleBar_text item for consistency. It should have equal margins at the top, bottom, left. The text for the RSK (CanvasSoftkeysBar_LSK_text) should have equal margins at the top, bottom, right. Left and right margins should be the same for both LSK and RSK text items. Document pragmatically. The color of the text of both soft key labels is #FFFFFF, the weight of the text is normal. Refer to screen documents for language assets.
  • 9. Go for a walk and make some friends.
  • 10. 81 revisions later “Wireframes are pretty much there. Should be able to sign them off next week.” Plan to deal with change: you will, anyway.
  • 11. Plan to increment and iterate
  • 12. Thinking about scalable design
  • 13. Never finish.
  • 14. Thank you. tomhume.org www.futureplatforms.com Tom.Hume@futureplatforms.com

×