Saturday, August 10, 2013

Content influences design

Too often in our enthusiasm to get the look and feel of a web application or website right, we forget that content makes up one of the primary deliverable. Content planning (what, why) and delivery (How, When, Where) is an important part of design.

At present, I am working on a number of portals with the aim of creating a consistent, seamless experience for users as they travel between portals. Now, each of these portals have a different look and feel,  its own Information Architecture and are even built on different technologies. One of the main issue here is that in addition to the design,  the “type of content” too, is not consistent. While Portal A is a repository of documents and templates, Portal B provides a number of reports and metrics on performance of products and services and Portal C acts more as a online training tool and a help desk.

Consider Portal A to be a document management system, Portal B a dashboard, similar to Google Analytics or the likes and Portal C similar to an Online Training and help desk website where users can enroll or choose trainings, get assessed and get a report on their progress or log IT related queries. Certainly, the purpose of each of these portals are unique and different from one another, and users accessing these portals expect information to be displayed to suit their needs. However, this is not the case with these portals.

Great wireframes need great content
I had the (mis?)fortune of looking at the wireframe that was initially developed for the above mentioned portals. Unfortunately, these portals were built from the ground up using a single design template as the foundation.  Herein, lies the problem. Wireframes provide a good visual aid to what the final design may look like and are excellent for creating mock-ups of form, functionality and content.  However, while structure, layout and design consistency is key, it is important to note that wireframes fail if the dummy or sample content is not representative of the actual data. Using “Lorem Ipsum…” text as content adds little value to your wireframe design. To address this issue, wireframes need to include sample content that is indicative of the “actual” data or information to be used.  While this approach gives an idea of what the final site would look like, it also provides an opportunity to review the right content that is offered to your target audience.
One of the key take-away working on this project was the importance of getting stakeholders to sign-off on the content during the wireframe stage itself. Though it may seem difficult and content may not be 100% ready, it is important to convey to stakeholders what and how content would be presented on the website. This is specially true if you are working on multilingual websites or web applications.

User centered content
Similar to user centered design, it pays to provide content centered content targeted to meet your user needs. While segmentation works well, and most marketers do a good job in segmenting their target audience, this segmentation is based on user demographics and user profile instead of user needs.

A good example for user centered content would be University websites that have more than one target audience. In this case the primary audience could be categorised into:
  • Existing Students – Need to access reports, assignments, performance, join clubs etc.
  • Prospective Students – Need to find information on relevant courses, fees, facilities etc.
  • Alumni – Need for networking opportunities, jobs, workshops and events, etc.
  • Staff – Need to administer courses, student assignments, student performance etc
Each of these target audience accesses content to meet their specific needs. Segmentation based on demographics or user profiles does little due to the overlap in roles. A Female, in her mid 20s, earning XXXX could be a staff or an existing student. Then again a particular staff could also be a prospective or existing student looking to further their education.

In this scenario, content targeted to meet specific user needs would give better results as apposed to segmentation based on demographic or user profiles.

Content influences design
In the above example, while the over all structure and layout would be consistent, content would change based on the target audience. This content would influence how, when and where information is provided to your users. From collapsible panels, to widgets, from pdf files to streaming videos, from blogs to tweeter feeds, the options to present information is limitless. And depending on your content – the what and why, you chose the medium – the how, when and where, thus influencing the design and the user experience.
Too often in our enthusiasm to get the look and feel of a web application or website right, we forget that content makes up one of the primary deliverable. Content planning (what, why) and delivery (How, When, Where) is an important part of design. - See more at: http://force10x.com/blog/user-experience/content-influences-design/#more-90
Too often in our enthusiasm to get the look and feel of a web application or website right, we forget that content makes up one of the primary deliverable. Content planning (what, why) and delivery (How, When, Where) is an important part of design. - See more at: http://force10x.com/blog/user-experience/content-influences-design/#more-90
Too often in our enthusiasm to get the look and feel of a web application or website right, we forget that content makes up one of the primary deliverable. Content planning (what, why) and delivery (How, When, Where) is an important part of design. - See more at: http://force10x.com/blog/user-experience/content-influences-design/#more-90

Thursday, August 8, 2013

jQuery File Upload

Another upload plugin! What makes it different?

  • It's new. Supports all modern technologies.
  • It's good looking and works out of the box. Based on Bootstrap and Glyphicons icons.
  • Cross domain upload, client size images resing.
  • Supports multiple platforms (PHP, Python, Ruby on Rails, Java, Node.js, etc)
http://blueimp.github.com/jQuery-File-Upload/

Browser support

Quick start

There are two available versions of plugin, Bootstrap and jQuery UI based. There is also a basic version of plugin (if you want to design a custom UI around it).

Settings

Using jQuery File Upload (UI version) with PHP

Download source code and upload it to your server. Rename the folder if you need to. Open demo page to make sure it works.
By default everybody can upload and download files. If you want to protect files from being downloaded - password protect "files" folder via .htaccess.

Using jQuery File Upload (UI version) with Google App Engine

Download plugin and edit app.yaml file replacing "jquery-file-upload" with your App ID. Upload server/gae-python or server/gae-go to Google App engine (depending on what your development language is).
Upload jQuery-File-Upload (root folder) to your own server and edit form action target to point to your App Engine instance.

Using jQuery File Upload (UI version) with Node.js

You can install Node.js sample to your server via npm.
npm install blueimp-file-upload-node
Start service:
./node_modules/blueimp-file-upload-node/server.js
Download plugin, unzip it, edit index.html and point form action to your Node.js (i.e. to http://localhost:8080). You can also upload project files to any other server and use it as a UI to upload files to Node.js server.

Using jQuery File Upload (UI version) with other platforms

More details at http://github.com/blueimp/jQuery-File-Upload/wiki/Setup.

The level of detail in your mock-ups should reflect the level of confidence in your design

Mock-ups are prepared as a way of exploring a particular design problem, and in order to communicate your thoughts on a solution to important stakeholders (i.e. users, clients or developers).
In the early stages of design, mock-ups should communicate broad concepts and groupings of information or functions. Keeping the details scant at these early stages allows you to progress through iterations quickly and keeps your stakeholders from throwing the baby out with the bath-water by quibbling over colours and button placement.

As you progress towards a final design, mock-ups should be rendered in increasingly higher fidelity so that the full detail of your approach is exposed.

People are good at recognising shapes

People generally identify shape outlines before they identify the detail within. Icons with different outline shapes will be quicker to tell apart than icons with the same outline shape.

Developer - The worst part about designers is...

...that with a wave of their hand, they create hundreds of lines of code!

The strategic design decisions that we make on a daily basis often have a significant effect on the amount of work that a developer needs to perform in order to realise the vision.  On projects where the requirements and design are completed before development starts, the effect of this is obscured from the developer's view and expectations are more easily managed.

However in more agile environments - where the design may be shifting while coding is happening - we need to be mindful that seemingly minor changes may have significant consequences. This can upset the delicate balance of power that is shared between designer and developer. Be aware of this and always act with humility and delicacy in such situations.

The Myth - Users Will Only Make That Mistake Once

Along with "We'll fix it in training", this is one of the laziest and most commonly employed excuses for an inadequate design.


In order to avoid the mistake next time, users must make an investment of cognitive effort. If the interaction can't be made simpler, at least be sure that this investment yields some net return, somewhere - such as improved task efficiency for the majority of users.