Converting Desktop Application Tool to Web Based Application
Approach and How to attain better User Experience?Most of legendary desktop application users are either forced to use it as it is or they become addicted to those kinds of features. It is tough to break the mental block of users who are used to desktop application model. However if a tool goes online, it is a big challenge to tool makers to make it more comfortable and user friendly to those users who are already using the tool and now switching to new version. Tool makers have 2 tasks to handle, one on how to make learning curve easy for the users, for example users don’t have to scratch their heads more to understand the task flow, secondly on how to fulfill all the criteria of the existing tool and convert it into web based one.
However to start with such Conversion project, as a usability methodology goes some steps that I feel has to go before starting are:
User Types
User 1 – Experienced existing tool user, who is not ready to compromise on the existing tool functionality and would hate if that is hampered in browser based application.
User 2 – Experienced existing tool user as well as Internet savvy person, who wants a better user experience than the existing one and he is well versed with how browser behaves and wants all information as clear as it looks
User 3 – Focused user, who may not be interested in the rest of the application, but what he wants is the task which he performs need to be well organized and easy to locate.
User 4 – New tool user, who has not seen the old tool but is introduced directly to the new application.
Speaking to Users who use this application
No grouping needed, directly speak to people following questions
How you use it ?
Why they use it ?
What tasks you perform?
User groups and tasks flow for eachAfter gaining knowledge on the tool about how each users use the application, if no groups are formed, time has come to form groups of users. For example Admin, Sales, Finance and so on.
So draw task flows for each group. This way we know what and how the application is mapped to user.
PersonasAfter that create sample personas for each group,
Example
Mr. XYZ, working as Admin guy, spends 5 hours daily in the application. He hates certain section but is forced to do it as his work demands it.
User Interview preparation
Start the questionnaire with asking basic questions on how often you use the tool. What is the most frequent task that you do, etc. Then move towards setting tasks from the existing application for each group. Take the most complicated task that you could find in the application and make a giggle puzzle sort of question, for example “set a pricing for xyz product from a specific group of products coming under abc section. Note that only that product has to be given a price. Set a discount of 10% to other products following under the same product group.” Basically idea is not to quiz the user but to see on how he performs the task and how the application behaves.
Usually take 5-10 people from each group. This can be one to one interview and generally there are 2 people involved in this. One who will ask questions and other who observe the user. If person to person is not possible due to geographic restrictions, good way to do is LIVE MEETING wherein users are given full power to access the application and you just ask them to perform the task and observe on how he does.
Research and ReportsBased on feedback from interview, make a report of common problem areas that uses are facing, new ideas that you got from users. Collate all under one roof to form a set of ideas and approach towards creation of new tasks.
New task flowsNow compare the old task flows (for all groups) and the feedback report. Now come up with new task flow, usually people skip this and jump towards Wireframes, which is not a bad idea but it would be good if we have task flow ready before wire framing exercise begins.
Wireframe Creation
After New task flow are done, you get a fair idea on how the system should behave and what changes you need to do ? Start sketching the same in either a paper or use power point/Visio for the same. Get to discussion table and discuss on the approach for each tasks and come up with final set.
Walkthrough or click through of the applicationAfter Wireframing, entire application can be made as a click through prototype. This can be either in a form of HTML or series of Wireframes. Preferable would be HTML as this gives a feeling of Web application to users
Research and implementation on how to convert non-web elements to web elements
When you convert each module or tasks from desktop model to web oriented one, you also need to look into how to convert some of non web elements, something like desktop menus, navigational items compatible to desktop model but may differ in web.
Lay out Navigation and Sitemap
While HTML Wireframing, define the navigational structure and draft it so that it becomes easy for designing other pages and things would be crystal clear. So first step it to do a Sitemap which is essential to start with.
Usability testingAfter you end with the HTML walkthrough, go ahead with setting up questionnaire for the new design. Follow the same step 5 and give tasks to users to perform. Note the users should be same whom you had interviewed earlier. This is because they are the right people to judge on how well the new system is fared and how well their concerns were addressed.
Usability Testing feedback and review After Usability testing, we get to know on whether you have succeeded in achieving better user experience of new system by judging on how fast and efficiently users perform the tasks. If the time required to perform the same task is lessened and if the user is able to find the task easily and is quite happy the way it’s been laid out then you are on right path. If user is uncomfortable in doing certain task then you can ask the correct way that he wants to be. Finally you again review the feedback and do the final changes. If you have collected right feedback during interview stage, then its only 5-10% re-work.
Visual DesignAfter you are clear with the all, Start with painting the same wireframes/HTML, which in other words called Visual Design. Here is where you define the layout design, how buttons will look like, how navigational items be graphically represented. Things become quite easy if your wireframe is ready, visual designers can easily visualize things as they have basic layout with them.
Style guidelines Lastly you need to prepare a style guidelines wherein all the layout styling and CSS are documented. This will be easy for the development reference
Ready for developmentSo here we go we are ready for development kick off. Again your HTML should be in such a way that this can be reused by the developers rather than they again re-creating the same. This can be achieved through proper labeling of items, 100 usage of CSS based layout, Clear and Clean HTML tags with proper comments on each tables or divs.
For last six months or so I have been using Sony Ericsson Mobile obviously below 10k (I don’t like to invest more in mobile above 4 figures), last held by me was Nokia Express music. Initially I thought maybe I am used to Nokia so didn’t bother much on difficulty faced by certain daily activity done by mobile gadget, something like contact address, changing tunes, turning to silent mode, switching on off mobile, messaging and all that… because I knew that as we are used to one item for a longer duration, users have a tendency to hate any new changes, but as the day went on, I really started missing my Nokia phone.
