Human Computer Interaction and User Interface Design Essay

The two interfaces chosen for this project are two book selling sites – LinkedIn. com and Orkut. com. The two websites are social networking sites. While Orkut. com brings together friends and is more personal in nature, LinkedIn. com is more professional. Social networking sites being highly popular, I chose to select these interfaces for comparison. LinkedIn has over 40 million professionals using it to: †¢ â€Å"Exchange information, ideas and opportunities† †¢ Connect or re-connect with and stay informed about their contacts and industry †¢ Find inside connections to find a new job or business opportunity †¢ Find the people and knowledge required †¢ Have a controlled online professional identity Orkut, on the other hand, lets you connect with people you already know in your personal life (friends and family) while at the same time allowing you to make new friends through friends of friends and communities. It allows sharing of videos, pictures as well as your passions with friends and communities. 2. Norman’s principles for good design Norman has suggested the following principles to ensure that a website has a good design: †¢ Visibility–The designer should ensure that the state of the possible actions can be easily understood by the user. †¢ Conceptual model–All operations should be consistent in nature and the user should be able to easily understand how the site works and what options are available to the user. †¢ Mappings–The user should be able to easily map actions with their results such as between controls and possible actions that can be taken on a control or between the system state and visible indicators like change of color or image. †¢ Feedback–Users should continuously get feedback on the results of their actions helping them understand whether they have taken the right step or not. 3. User Interface overview 3. 1. LinkedIn LinkedIn requires your name and email address to open an account post which you need to provide your current employment details. These two pages are simple, similar to the Google search page look. Once the registration is completed, LinkedIn takes you to your LinkedIn page. The homepage is divided into two sections – the top section that consists of main links to search people, jobs, answers and companies with comparatively big bold letters and is separated from the bottom section by a blue line. On the right corner, quick links to the account and its settings, help language and the option to sign out are available. The top section has blue font with a white background all through. This section also consists of a search option to search people, job, companies, etc. using a drop down box. The search option automatically changes to reflect the section it is in i. e. it says â€Å"Search People† when in the Contacts page and â€Å"Search Groups† when in the Groups page. The bottom section has a grey background and is divided into three parts. Each section individually has a white background and the sections are floating in the grey background. The bottom section represents the main work area consisting of the details regarding the user profile, contacts and groups. The left hand side frame provides options personal to the user which includes viewing various lists such as groups joined, profile, contacts, inbox, and applications that help improve user experience with LinkedIn. These links are provided with images as well. These links further provide links to options available such as My Groups, Groups Directory and Create a Group for the Groups menu. The submenus are not visible but can be seen on clicking the menu item or clicking on the + symbol on the right side. The submenus can be collapsed by clicking the – symbol that now appears instead of the + symbol. The link for the current page is highlighted with a blue background. In Home page, the words Home have a blue background unlike the others with white background. At the end of the menu, there is a button to add new connections. The button is of green color and attracts the attention towards it. Below this section is another small section that is an assessment of profile completeness along with a photo and name. The profile completeness is expressed in words as well as a status bar is shown that reflects the actual status. The name draws the attention with its bold font along with the status bar. The right side section consists of several modules – the main module being the â€Å"Build your network† in a green colored box that provides different options to find your contacts. The options include searching using web email contacts, address book contacts, or using email addresses. For web email contacts, again several options are provided as radio buttons. Since each of these options require different inputs, selecting one shows a box with an arrow pointing towards the option selected and the inputs required are within this box. All buttons on the page have a light orange color which changes to blue on moving the mouse over it. All links within this module also have an icon associated with it. In the extreme right, there are several modules one below the other starting with ads by LinkedIn Members. The remaining modules include featured application on LinkedIn, Reading List by Amazon, Events, Answers and Jobs. The headings in these modules are in white color on blue background. Text within these modules is in black color whereas links have blue color. Important words like subheadings, Member names, event names, etc. are appropriate made bold to highlight them. The events are represented with the date put in a box with grey background and the month above it in smaller font with orange background. Each module heading also consists of an edit link and an ‘X’ to remove the module. At the end of these modules is the option to add other applications as required. Here again a plus symbol is used to indicate the adding of a new application. The arrow at the end can be clicked to show a list of applications available to be added but the arrow is too small and can be easily missed. These modules can be customized as required, adding, editing or moving them around to suit an individual’s preferences and needs. At the bottom, there is a tip available in a box. More tips can be seen with the help of arrows. Here arrows that are commonly used to move to next or previous tip are used. Clicking on Profile or Edit My Profile or + symbol next to Profile brings one to the Edit My Profile page. The Profile text in the menu now has a blue background indicating the current page. The centre module that consisted of Build your Network is now replaced with the profile details with a heading Profile in navy blue background and two tabs – Edit My Profile and View My Profile. The current tab is in white background whereas the inactive tabs are in grey background with text in blue. The module background is now blue with different subsections in white background. At the top the main details about the user is provided i. e. name, current position and company, location and industry. The last two details are shown in grey color. The links are maintained in blue color, headings and subheadings in bold blue and a + symbol to indicate adding detail in any subsection. An Edit link within square brackets follows all text that can be edited. On the extreme right, a profile completeness status bar is shown but also lists tips on how one could complete the profile along with how much percentage difference it makes to the profile completeness status bar. This module is very helpful, especially for someone new to social networking sites. Clicking on View My Profile tab shows the profile with the same details except that there are no Edit links or + symbols to add further details. The status bar is not seen in this view. Clicking on Contacts section leads to three tabbed page – Connections, Imported Contacts and Network Statistics. The connections are shown listed alphabetically. On the left side, the alphabets are listed and can be clicked to jump to the connections with names starting with that alphabet. Brief details about each connection is provided including email, current position and company and also includes a circle that indicates the number of connections that person has, indicating the network you could be having. The Groups link leads you to the Groups page with four tabs – My Groups, Following, Groups Directory and Create a Group. The list of Groups is presented in a clean manner with an icon representing the group, quick links to discussions, news, updates, members, settings, etc. At the bottom of the list, there is an option to change the order of the groups and how many groups can be displayed at any one time. The order can be changed by writing the numbers or using arrows. On the right side of the list, two blue-colored boxes provide you information on Groups Directory along with a button to find a group as well as option to create your own group. The buttons change color when a mouse moves over. While there are many more functionalities available, the user interface remains the same: 1. Blue color for all links 2. Bold for all headings and subheadings 3. Icons/images to represent major menus or data 4. Tabs for sub menu information 5. Links provided to ease selection 6. Provision to add, remove, edit, or move extra modules around to ease access and utility. 7. Feedback to the user in terms of background color change for links and button color change for buttons 3. 2. Orkut To log into Orkut, one needs to have a Google Account. The page for creating Google Account is simple – a form with a blue border requesting for information like name, email and password with a line marking the end of this subsection. The next subsection begins with a word verification and terms of services provided in a blue scrollable box with grey background. The button for accepting the terms is simple and consists of full text â€Å"I accept. Create my account. † rather than simply saying â€Å"Accept† which makes it clear for new-to-internet users. The login page is simple with two main sections – the top section consisting of all the details and the empty bottom section with bluish grey background. The major left part of the top section consists of orkut selling points with magenta color highlighting the main words. The empty white space surrounding the text gives it a simple, non-cluttered and pleasing look. The top menu bar in dark blue color remains accessible across all pages. Below this is a section with various modules in white background floating in a light blue background. On the extreme left is the menu starting with photo, name, status and other details of the user. Below it is the menu leading to various pages such as profile, scrapbook, etc. Each of these menu items also have an associated icon that is easy to relate to the name of the menu. This is followed by Apps and other menu items. The profile, menus, apps and other menus are separated by a blue line. All text is also in blue. It is noteworthy that all the menu names are in lower caps. Below this module, there is a module to invite friends using their email address or more. All through the page, all links are in blue and when a mouse moves over a link, there is no change in background color or image except an underline below the text. Friend suggestions is another good option since it not only provides you potential friend list, but also shows photos so that one can confirm if he/she is the same person one knows. It also provides quick links to view the profile or add as a friend. An X at the top of the photo can be used to remove it from the list quickly and arrows can be used to navigate through the list. The arrows change to light grey color when one can’t go further on either side. Below this is Updates from my friends section that provides a list of updates on the friend profile. On the extreme right is the â€Å"my friends† section with a count of total friends. It lists around 9 friends along with their photos and there is a link to view all friends, manage them, or find more friends. It also allows for searching friends. To meet the space crunch issue, the text box for searching itself has the caption rather than placing it outside. On clicking inside the text box, the caption clears and the user can add their text to search. Once the profile is filled up and many friends added, the home page can seem cluttered with a lot of information. This is followed by advertisement which is followed by â€Å"my communities†. The layout of this is similar to â€Å"my friends†. Clicking the profile link shows the profile details. Three tabs – social, professional, and personal are provided to add details about different areas of the user. The social tab is further divided into sections separated by a broad white area which also consists of an edit button. Alternate coloring pattern is used to make it easy to read each line and each detail of the profile. â€Å"My scrapbook† page provides all scraps from friends. By default, one can view 10 scraps on one page but a drop down box provides other options as well. Navigation links to move to first, last, next and previous pages are also provided as links. Each scrap is in its own blue box with photo of friend provided along with friend’s name and message. Options to reply and delete the message are also available. Once a conversation has been done through more than one response exchanged, there is a new link â€Å"View this conversation†. Clicking this link grays out the page and opens a new box consisting of the conversation details along with provision to delete. Again, the background is white with each scrap in a light blue colored box. To close the conversation box, an image with an X is provided as well as a close link. A new scrap can be typed in easily through a text box. Again there is no title or caption for the box but the same is seen as content in grey color within the text box. The scrap can also be written in different languages which can be conveniently chosen from the drop down list. Adding a community and managing it is similar in working to adding and managing friends in Orkut. 4. User survey 4. 1. Task description The users are required to do the following: 1. Register themselves 2. Sign In 3. Enter their profile details 4. Search for a friend/professional known to them 5. Add to friend list 6. Search for a community 7. Add themselves to that community 8. Sign out 4. 2. Success criteria The user should be able to create a profile, add contact(s) and join a community/group. 4. 3. User Profile User 1 is an active internet user and has prior online social networking experience. User 2 is new to computers and internet, this being amongst his first experience with social networking. User 3 uses internet mostly for surfing and finding information and has not been a member of any social networking site yet although understands the common functionalities of such websites such as registering, logging in to the site, searching, etc. 4. 4. User experience Due to his prior experience using social networking sites, user 1 had no problem registering for either of them, adding contacts, searching and registering for a group. User 1 found both sites equally easy to register, add contacts and join community; however, he was impressed by the ability to add, remove, edit and move modules in LinkedIn and was looking for similar options in Orkut. Also, searching friends in Orkut listed several names and finding the right one was difficult. While user 2 was able to create the profile and add contacts, the user sometimes felt lost in Orkut once the contacts were added and found it difficult to get back to home page. User 2 also found it difficult to easily search the friend and wished there was an easy way like LinkedIn. User 3 was also able to register easily, add contacts and join communities/groups. User 3 was not concerned about the difficulties in searching friends or professionals and looked at this as an opportunity to make new friends. 5. Suggestions Once a user becomes an active user or has many friends/professional contacts, the information shown on home page can be too much. Suggestion is to show the information partly and provide a link to further information or simply provide links to go to information. By making certain information like school or college details mandatory, orkut can help ease the search process that currently requires searching a friend from a list of hundreds with the same name.