The document provides tips for organizing content and designing user interfaces for mobile devices. It discusses trends in mobile apps like emotional connections, self-improvement apps, and dashboards. It also offers guidance on navigation, prioritizing information, calls to action, notifications, and profiles. The goal is to create intuitive, engaging experiences that solve users' problems and guide them through the app efficiently.

1. Organize Content for Mobile
Devices
UX Design
for Mobile Interfaces
Andi Galpern, UI/UX Designer
@andigalpern
I organize events for @cascadesf

2. A different era…

3. Good design creates trust.

4. Trends:
Emotional connections

5. Stop Breathe
and Think

6. Stop Breathe
and Think

9. How do they FEEL?

10. Customize the experience.

11. Trends:
Self Improvement Apps

12. To Bed

13. To Bed

14. Trends:
Accomplishment

17. Stop Breathe
and Think

18. Trends:
One-click location detection

23. The less work on the user, "
the better.

25. Trends: "
Dashboards

26. Stop Breathe
and Think

27. Elevate

28. Trends:"
Introduce your app.

29. Source: SkyGuide iPhone App
Introduction
Teach them how to use
your app.

31. Source: Sprig iPhone App
Introduction
Show them the benefits.

33. Provide clear
instructions.

35. Let’s talk about navigation.

36. Why is navigation so important?

37. http://joomlart.s3.amazonaws.com/images/blog/sticky-
Off Canvas
Navigation

38. Off Canvas
Navigation
Source: Rdio iPhone app

39. Visual Navigation
Use icons to separate
categories.
Source: City Guides by National Geographic iPhone

40. Slide Down
Navigation
Source: Vine app

41. DEBATE
Great
The
Hamburger Menu

42. exis web:
To hamburger or not to hamburger?

43. 2.4% 2.7%
1.9% 2.6%
exis web:
To hamburger or not to hamburger?

44. Use the word ‘Menu’
2.7%

46. Source: Ted iPhone App
Try a tabbed
menu.

47. Design with a
goal in mind.

48. What problem does your app solve?
Get clear.

49. How does your app solve this problem?
Get clear.

50. Who is your ideal audience?
Get clear.

51. Why will people use your product?
Get clear.

52. Problem:
Tracking spending
habits and budgeting
gets complicated.

53. Solution:
Mint does all the work
of organizing and
categorizing your
spending for you.

54. Problem:
Establishing good
habits to keep your life
balanced can be
difficult.

55. Solution:
Track the things you
wish you did more
often. Be motivated to
do them again and
again.

56. Prioritize
Information with
Visual Hierarchy
Help your audience to
pick out the most
important information.
Source: Fast Company, May 2014

57. Prioritize
Information by
Importance
Source: Fast Company, May 2014

58. Prioritize
Information by
Importance
Source: Fast Company, May 2014

59. Prioritize
Information by
Importance
Source: Fast Company, May 2014

60. Call to Action
Guide the user with a
clear path to follow.
Source: Sleep Cycle iPhone App

61. Writing Calls-to-action
Free ebook from HubSpot"
http://offers.hubspot.com/how-to-create-
effective-calls-to-action

62. Source: Udemy iPhone app
Social Influence
Build trust with
ratings from other

63. Notifications
Use positive
reinforcement when
alerting users.
Source: Wisely iPhone App

64. Notifications
Use positive
reinforcement when
alerting users.
Source: Stop Breathe and Think

65. Lists
Use subtitles to
separate content into
sections.
Source: Hotel Tonight iPhone App

66. Save People Time
Let them know how long
it will take to read the
article.
Source: Blinkist iPhone App

67. Save People Time
Let them know how long
it will take to read the
article.
Source: Medium iPhone App

68. Use Big Pictures
People love high
resolution photos!
Source: Medium iPhone App

69. Use Big Pictures
People love high
resolution photos!
Source: Sprig iPhone App

70. Search
Use autocomplete to
assist and suggest
search results.

71. Sign In
Use one-click sign in!
to convert more users.
Source: MySpace iPhone App

72. Source: Vine iPhone App
Connect
Allow users to discover
their friends.

73. Source: Medium iPhone App
Profile pages
Keep it simple and
clean.

74. Source: Swarm iPhone App
Activity Feeds
Help users see what
their friends are up to.

75. Let’s work together to make the web
more beautiful.

76. Thank you!
Yes, I’ll post the slides. :-)

77. Resources:
http://www.bluefountainmedia.com/blog/how-to-organize-content-for-mobile-website-
optimization/
!
http://www.webdesignerdepot.com/2012/11/best-practices-for-navigation-on-the-mobile-web/
!
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/
LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
!
http://issuu.com/courtneybolton/docs/50-ux-best-practices/19?e=1567435/5158170
!
http://www.businessinsider.com/html5-vs-native-apps-for-mobile-2013-6?op=1
!

78. uxnight10.eventbrite.com

79. @cascadesf cascadesf.com
Designing the web together