Social Network conventions? - a lesson for wireframes

Apparently, social media websites are the “thing” nowadays, from the ever-present Facebook to the recently launched Pinterest in 2010. Even Microsoft is lanching the new Windows So.cl Social Network. But can Microsoft really succeed in this area? For those who want to compete in this area, user experience is vital. It’s difficult to compete with the likes of facebook and google+, but it is possible if you provide a great user experience. Companies need to offer what the current social networking sites don’t, whilst sticking to the current UI conventions so that the user can navigate easily around the site. For those conceptualizing a new website or social media platform, creating wireframes can be a great way to draft ideas and come up with a variety of designs.

What are wireframes

For those of you who are new to making wireframes, the term “wireframe”, according to the Collins English Dictionary (2009) means “a visual representation of the structure of a web page.” You don’t just have to use wireframes for website designs, however. You can also use wireframes to draft software applications and mobile apps. The name “wireframe” also shows that this is the bare-bones of design. The main purpose of creating wireframes is to create a starting point for your application development. Many wireframe tools allow you to create low or high fidelity wireframes. This means the level of detail can vary depending on your needs. For example, you may be interested in the different processes, in which case an interactive wireframe tool would suit your needs best. As with Goldie Locks and the Bears, a medium fidelity wireframe is “just right” for some people in that it gives a balance between lots of detail and simple and clean structure for the wireframes.

Why use wireframes?

If I were to make a social network, I would make a wireframe of it first. Making wireframes does’t take a lot of time if I have a wireframing tool and there are even some online wireframing tools available. Using wireframe software can make it easier to modify designs down the road. For this social network wireframe, I should remember that the current conventions of a profile UI is for a profile pictures to be in the upper left hand corner. Google+ and Facebook use this convention, so it makes sense to do the same in our wireframe if that is where the user will expect it. So.cl placed their profile picture in the upper left of the page, but more centralized than Google+ or Facebook. Another example of an important convention to remember in your wireframes for social networks, is that the content or post feed should be more centralized. If you were to make wireframes of Google+ and Facebook you would see that the content is centralized. So.cl did the same in theirs.

Take Aways for wireframes and Social Networks

To take all of this content and summarize it in one sentence would be difficult, so let’s try for two. Wireframes can follow conventions to aid with user interface design and usability. Find out what users expect and implement those in your wireframes. I would suggest looking into some wireframing tools as well, since this helps make wireframes faster and you could try to generate lots of wireframe ideas with it. Just like Microsoft created their So.cl network as an “experimental research”, don’t be afraid to try out your ideas as well - who knows, it could be the next greatest Social Network! Remember though, be social!

=================

About the Author:

=================


Pidoco.com – Interface Design, Wireframe, wireframes, Wireframe Software, Interface Design Software, Online Wireframe Tool, Wireframe Tool, Prototyping Tool, Clickable Wireframes, Usability Testing & Digital Paper Prototyping. User centered design for improved UI Design.