{"id":4584,"date":"2016-10-06T06:38:32","date_gmt":"2016-10-06T06:38:32","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4584"},"modified":"2016-10-06T06:38:32","modified_gmt":"2016-10-06T06:38:32","slug":"social-design-patterns","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/social-design-patterns\/","title":{"rendered":"Social Design Patterns"},"content":{"rendered":"

Social Design Principles<\/h2>\n

Although pure social networks were the original contemporary social applications, many of their design principles apply to designing social patterns for any kind of mobile application. Smashing Magazine detailed some of the most important best practices in Social Network Design: Examples and Best Practices<\/a> and I\u2019ve adapted that list below:<\/p>\n

<\/div>\n
    \n
  1. Engage quickly<\/li>\n
  2. Show profile photos (i.e. an identity)<\/li>\n
  3. Make it easy to self-express<\/li>\n
  4. Make it easy to take action<\/li>\n
  5. Allow users to connect with each other<\/li>\n
  6. Make it easy to communicate with others<\/li>\n
  7. Allow contacts to be grouped<\/li>\n
  8. Show only relevant information<\/li>\n
  9. Make content dynamic<\/li>\n<\/ol>\n

    An Overview of The Patterns<\/h2>\n

    Keeping in mind the design objectives above, here\u2019s an overview of the design patterns we\u2019ve detailed in this article and at even greater length in our e-book, Mobile UI Design Patterns 2014<\/a>:<\/p>\n

      \n
    1. Activity Feeds<\/li>\n
    2. Friend Lists<\/li>\n
    3. Follow<\/li>\n
    4. Vote to Promote<\/li>\n
    5. Direct Messaging<\/li>\n
    6. Single Share Button<\/li>\n
    7. Like<\/li>\n
    8. Find & Invite Friends<\/li>\n<\/ol>\n

      1. Activity Feeds<\/h3>\n
      \"Activity<\/div>\n

      Quora, Swarm<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to keep up with what\u2019s happening around them and get quick updates on recent activity.<\/p>\n

      <\/div>\n

      Solution<\/strong><\/p>\n

      Show recent activity that\u2019s relevant to the user within the app. Aside from the obvious Facebook or Twitter news feeds, other apps that contain an element of social interaction, like Quora or Swarm have implemented activity feeds that provide users with an overview of recent activity from their friends or people they follow. The activity stream can be used to aggregate recent actions by an individual user, commonly used on profile pages; more commonly however, activity feeds are used to aggregate multiple users from the perspective of one user. These feeds are extremely useful in demonstrating different features of the UI by showing how other users are interacting with it, and in this also plays a great word-of-mouth role.<\/p>\n

      Quora and Venmo are two of my favorite activity feeds because \u201clearning\u201d and \u201cearning\u201d are two of the primary things people do in life. It\u2019s fascinating to passively see people I know provide meaningful answers about self-improvement while others are spending their hard-earned money on pixels and lip rings.<\/p>\n

      <\/div>\n

      2. Friend Lists<\/h3>\n
      \"Friend<\/div>\n

      Snapchat, Songkick<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to keep track of their friends and contacts within the app.<\/p>\n

      Solution<\/strong><\/p>\n

      Show all the user\u2019s connections or friends in a list. Snapchat and Yelp are part of the growing number of apps that give you friend lists. Whether it\u2019s one-on-one communication or keeping track of someone\u2019s tastes and preferences, the way users explore their blossoming friend groups will become increasingly contextual, requiring friends to become a more integral part of the web and mobile experience.<\/p>\n

      3. Follow<\/h3>\n
      \"Follow\"<\/div>\n

      Flipboard, Songkick<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to track and keep up to date with activity on topics or themes, not just people.<\/p>\n

      Solution<\/strong><\/p>\n

      Let users select items that they want to stay up to date with. Aside from the purely social apps like Twitter, other apps like Circa, Playboard, Flipboard and Songkick let you select channels or artists that you want to keep track of, and updates are shown in the user\u2019s newsfeed. Whether you have friends or not, there\u2019s endless user-generated content to keep you busy. For the same reason friend lists will become an increasingly important UI design pattern, so will following.<\/p>\n

      4. Vote to Promote<\/h3>\n
      \"Vote<\/div>\n

      Vine, 9Gag<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to endorse and share content they like.<\/p>\n

      Solution<\/strong><\/p>\n

      Let users participate in content curation by designing a voting system, where content they like can be promoted. The idea of crowd-sourced content curation was popularized by the likes of Digg and Reddit, and today we see almost every app that has user generated content integrate this pattern to bring up the best.<\/p>\n

      5. Direct Messaging<\/h3>\n
      \"Instagram\"<\/div>\n

      Instagram<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to send private messages to their friends from within the system.<\/p>\n

      Solution<\/strong><\/p>\n

      Allow users to interact with each other in private messages alongside their other interactions. Carousel and Instagram and many other apps offer chat or direct messaging as an integral part of their experience. Private chat UI design patterns will continue to blossom across many apps, not just traditional \u201csocial networks\u201d now that users are finally comfortable sharing more private things online and they have substantial breadth in the content they\u2019re generating online, even their financial transactions on apps like Venmo.<\/p>\n

      6. Single Share Button<\/h3>\n
      \"Single<\/div>\n

      Medium, 9Gag<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants an easy way to share interesting content via various channels.<\/p>\n

      Solution<\/strong><\/p>\n

      Provide an easily accessible share feature that can be accessed through a button (or gesture). Because of the limited space on mobile UIs, most apps consolidate this into a single button instead of showing all the options up front. Medium, like many other apps, has consolidated the ugly \u201cshare\u201d widgets with a single share button to give you a beautiful experience as well as a clear action to share the content, regardless of where you want to share it. The UI can integrate with the platform to provide greater flexibility to the user, for example iOS integrations with Facebook and Twitter and the Android share actions which allow transferring content through to any other app installed on the system.<\/p>\n

      7. Like<\/h3>\n
      \"Youtube\"<\/div>\n

      YouTube<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to rate content in a simple way without having to worry about the degrees to which they like it.<\/p>\n

      Solution<\/strong><\/p>\n

      Simplify rating controls by making them binary choices \u2013 the user either likes it or dislikes it. Eliminating the fine-grain of stars and rating scores, this makes rating things easier for users as well as interpreting them. If I liked a video, should I rate it 4 stars or go all the way with 5 stars? YouTube and almost every application lets you like (or even dislike) everything in a binary wayinstead. A lot of apps provide a way of showing appreciation by simply \u201cliking\u201d or \u201chearting\u201d content<\/p>\n

      8. Find & Invite Friends<\/h3>\n
      \"Find<\/div>\n

      Venmo, Foursquare<\/em><\/p>\n

      Problem<\/strong><\/p>\n

      The user wants to experience the application with their friends.<\/p>\n

      Solution<\/strong><\/p>\n

      Make the invitation process simple and easy to complete. Venmo, for example, makes it really easy to invite others through social, mobile contacts, and email integrations. Since word-of-mouth and referrals are a huge driver of growth especially in consumer applications, you\u2019ll see this UI design pattern proliferate and evolve even more. The invite feature can be built into the onboarding pattern or even as the empty state design, both of which we\u2019ve covered earlier.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Social Design Principles Although pure social networks were the original contemporary social applications, many of their design principles apply to designing social patterns for any kind of mobile application. Smashing Magazine detailed some of the most important best practices in Social Network Design: Examples and Best Practices and I\u2019ve adapted that list below: Engage quickly […]<\/p>\n","protected":false},"author":1,"featured_media":4585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[3,7],"tags":[124],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4584"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4584"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4585"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}