Human Computer Interaction and User Interface Design Essay

The two interfaces chosen for this project be two book selling sites LinkedIn. com and Orkut. com. The two websites ar accessible networking sites. While Orkut. com brings together friends and is more personal in nature, LinkedIn. com is more professional. Social networking sites being utmost(prenominal)ly popular, I chose to select these interfaces for comparison. LinkedIn has over 40 million professionals using it to Ex channelise development, ideas and opportunities Connect or re-connect with and deterrent informed unaired to their contacts and industry Find inside connections to chance on a in the altogether job or business opportunity Find the people and k at one timeledge required Have a controlled online professional individuation Orkut, on the some otherwise hand, lets you connect with people you al acquirey know in your personal life (friends and family) bit at the like time onlyowing you to advance new friends through friends of friends and communit ies. It totallyows sharing of videos, pictures as well as your passions with friends and communities. 2. Normans principles for favorable design Norman has suggested the following principles to ensure that a website has a good design VisibilityThe designer should ensure that the state of the possible actions faecal matter be easily unsounded by the drug drug user. Conceptual modelAll operations should be consistent in nature and the user should be able to easily understand how the site works and what plectrons are available to the user. MappingsThe user should be able to easily map actions with their results such as between controls and possible actions that can be interpreted on a control or between the system state and visible indicators like change of color or image. Feedback drug users should continuously get feedback on the results of their actions facilitateing them understand whether they contain taken the skillful step or not.3. User Interface overview 3. 1. Li nkedIn LinkedIn requires your name and electronic mail address to open an account site which you need to provide your current employment expand. 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 percentages the crystalise section that consists of main golf associate to search people, jobs, answers and companies with comparatively enceinte bold letters and is separated from the bottom section by a profane line.On the by slumps corner, quick cogitate to the account and its settings, help language and the option to sign out are available. The top section has blue font with a lily- black-and-blue backcloth all through. This section in like manner consists of a search option to search people, job, companies, etcetera using a drop d avow box. The search option automatically changes to reflect the section it is in i. e. it says await People wh en in the Contacts page and Search Groups when in the Groups page. The bottom section has a colourise telescope and is divided into ternion parts.Each section on an individual basis has a white background and the sections are floating in the grey background. The bottom section makes the main work area consisting of the expound regarding the user write, contacts and groups. The left hand side frame provides options personal to the user which embroils viewing various lists such as groups joined, profile, contacts, inbox, and applications that help improve user experience with LinkedIn. These unifys are provided with images as well. These links get ahead provide links to options available such as My Groups, Groups Directory and Create a Group for the Groups menu.The submenus are not visible scarce can be seen on clicking the menu specific or clicking on the + symbol on the right side. The submenus can be collapsed by clicking the symbol that now appears instead of the + sy mbol. The link for the current page is highlighted with a blue background. In situation page, the words Home buzz off a blue background unlike the others with white background. At the end of the menu, in that location is a spill to add new connections. The button is of green color and attracts the worry towards it. Below this section is some other small section that is an assessment of profile completeness along with a photograph 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 mental facultys 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 b uttons.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 common mackerel over it. All links within this module as well have an icon associated with it. In the peak right, there are several modules one below the other beginning with ads by LinkedIn Members. The remaining modules include featured application on LinkedIn, Reading List by Amazon, Events, Answers and Jobs.The inclinements 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 make 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 individuals 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 write or Edit My write or + symbol next to indite brings one to the Edit My Profile page. The Profile school text edition in the menu now has a blue background indicating the current page. The pith 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 conjunction, 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 th e 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 derail 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 quaternion 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, peniss, settings, etc. At the bottom of the list, there is an option to change the order of the groups and how legion(predicate) 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 knowledge 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 the Great Compromiser 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. grooming 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 r equesting 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 say Accept which makes it clear for new-to- net profit 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 startin g 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. relay station 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 cant 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 abide 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 deta ils. 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 deal 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 friends 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, th e 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 fraternity 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 community8. 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 p rior 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 every bit 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 O rkut 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 counseling 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.