Human Computer Interaction and User Interface Design Essay

The two interfaces chosen for this job are two book advertising sites – LinkedIn. com and Orkut. com. Both the websites happen to be social networking sites. When Orkut. com brings together close friends and is even more personal in nature, LinkedIn. com is far more professional.

Online communities being extremely popular, I chose to select these kinds of interfaces for comparison. LinkedIn has above 40 , 000, 000 professionals using it to: • “Exchange information, ideas and opportunities” • Connect or re-connect with and stay informed of their contacts and industry • Find inside connections to locate a new job or business opportunity • Get the people and knowledge necessary • Have a managed online professional identity Orkut, on the other hand, permits you to connect with persons you already know in your personal existence (friends and family) while at the same time allowing you to help to make new good friends through close friends of close friends and communities.

It allows sharing of videos, pictures as well as your article topics with good friends and neighborhoods. 2 . Norman’s principles once and for all design Grettle has advised the following principles to ensure that an online site has a great design: • Visibility–The custom made should make certain that the state of the possible activities can be conveniently understood by the user. • Conceptual model–All operations needs to be consistent in nature as well as the user are able to easily learn how the site functions and what options are available to the user. • Mappings–The user must be able to easily map actions with their results including between controls and likely actions that can be taken over a control or between the system state and visible signals like alter of color or picture. • Feedback–Users should continuously get opinions on the outcomes of their actions helping them understand whether or not they have taken the right step or not. several.

User Interface guide 3. 1 ) LinkedIn LinkedIn requires a message and email to open a free account post which you need to offer your current employment details. Those two pages are simple, similar to the Search page appear. Once the registration is completed, LinkedIn takes you to your LinkedIn webpage.

The home-page is divided into two portions – the top section that consists of main links to look people, jobs, answers and companies with comparatively big bold words and is segregated from the bottom section by a green line. Around the right nook, quick links to the consideration and its configurations, help dialect and the choice to sign out are available. The very best section features blue typeface with a white-colored 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 becomes reflect the section it can be in we. e. it says “Search People” the moment in the Connections page and “Search Groups” when inside the Groups site. The bottom section has a grey background and is definitely divided into three parts.

Every single section independently has a white colored background and the sections will be floating in the grey backdrop. The bottom section represents the main work area including the details regarding the user profile, contacts and groupings. The left hand side frame provides options personal to the user which includes viewing various prospect lists such as groups joined, account, contacts, mailbox, and applications that improve user experience of LinkedIn. These kinds of links are supplied with images as well. These kinds of links additional provide backlinks to possibilities such as My Groups, Groups Directory and Create a Group for the Groups menu.

The submenus are not visible but is visible on hitting the menu item or clicking on the + sign on the proper side. The submenus could be collapsed by simply clicking the – image that now shows up instead of the & symbol. The hyperlink for the present page is highlighted using a blue background.

In Webpage, the words Residence have a blue qualifications unlike different ones with light background. By the end of the menu, there is a key to add fresh connections. The button is of green color and appeals to the attention towards it.

Listed below this section is another small section that is an assessment of profile completeness along with a photography and identity. The profile completeness can be expressed in words as well as a status tavern is proven that shows the actual status. The brand draws the attention with its daring font combined with the status club. The right side section contains several themes – the main module getting the “Build your network” in a green colored box that provides different options to find your contacts.

The choices include searching using web email associates, address book associates, or employing email addresses. To get web email contacts, again several alternatives are provided because radio switches. Since all these options require different inputs, selecting 1 shows a box with an arrow pointing towards the option chosen and the advices required happen to be within this package.

All switches on the page have a mild orange color which becomes blue upon moving the mouse over it. All backlinks within this module also have a great icon associated with it. In the extreme right, there are several modules one below the other starting with ads simply by LinkedIn Users. The remaining modules include featured application upon LinkedIn, Studying List by simply Amazon, Occasions, Answers and Jobs. The headings in these modules will be in white-colored color on blue backdrop.

Text within just these themes is in dark color whereas links have got blue color. Important phrases like subheadings, Member labels, event labels, etc . work made bold to highlight all of them. The events happen to be represented with all the date devote a container with grey background and the month above it in smaller font with lemon background. Every module proceeding also consists of an edit link and an ‘X’ to remove the module.

By the end of these quests is the choice to add various other applications as required. Here again an advantage symbol is employed to indicate the adding of your new app. The arrow at the end can be clicked showing a list of applications available to always be added but the arrow is too small and may be easily skipped. These modules can be customized as essential, adding, enhancing or moving them about to suit a great individual’s personal preferences and needs. At the bottom, there is a idea 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 perhaps previous tip are used. Hitting Profile or Edit My own Profile or + mark next to Profile provides one to the Edit My Profile page. The Profile textual content in the menu now has a blue history indicating the present page. The centre component that consisted of Build your Network is now replace by the account details having a heading Account in navy blue background and two tabs – Edit My own Profile and View My own Profile.

The present tab is in white backdrop whereas the inactive dividers are in grey backdrop with textual content in green. The component background is actually blue based on a subsections in white backdrop. At the top the key details about the consumer is offered i. e. name, current position and company, site and sector. The last two details are shown in grey color.

The links will be maintained in blue color, headings and subheadings in bold green and a + sign to indicate adding detail in different subsection. An Edit website link within sq . brackets uses all text that can be edited. On the extreme right, a profile completeness status bar is usually shown nevertheless also email lists tips on just how one could total the account along with how much percentage difference this makes for the profile completeness status tavern.

This component is very helpful, especially for man to social networking sites. Clicking on Perspective My Account tab shows the account with the same details only that there are not any Edit links or + symbols to include further details. The position bar is not observed in this watch. Clicking on Connections section leads to three tabbed page – Connections, Imported Contacts and Network Figures.

The cable connections are shown listed alphabetically. On the left side, the alphabets will be listed and is clicked to jump for the connections with names starting with that abc. Brief information about each interconnection is presented including email, current location and organization and also features a circle that indicates the quantity of connections that individual has, suggesting the network you could be having.

The Organizations link prospects you to the Groups site with 4 tabs – My Groups, Following, Groupings Directory and Create a Group. The list of Groups is presented in a clean fashion with an icon representing the group, quick links to conversations, news, updates, members, settings, etc . At the bottom of the list, there is a choice to change the order in the groups and just how many groups can be shown at any one time. The buy can be altered by producing the figures or using arrows. Around the right part of the list, two blue-colored boxes provide you information on Groups Directory together with a button to get a group and option to create your own group.

The switches change color when a mouse moves over. While there are many more functionalities available, an individual interface continues to be the same: 1 ) Blue color for all links 2 . Striking for all titles and subheadings 3. Icons/images to represent main menus or perhaps data some. Tabs for sub menu information 5. Links offered to ease selection 6. Provision to add, remove, edit, or move extra modules around to ease access and energy. 7. Reviews to the user in terms of backdrop color transform for links and key color modify for control keys 3. 2 . Orkut To log into Orkut, one needs to have a Google Bank account.

The site for creating Google Account is straightforward – a form with a blue border asking for for information just like name, email and pass word with a range marking the finish of this subsection. The next subsection begins having a word verification and conditions of providers provided within a blue scrollable box with grey history. The key for accepting the terms is simple and consists of complete text “I accept.

Make my account. ” instead of simply stating “Accept” which makes it clear intended for new-to-internet users. The login page is simple with two main sections – the top section comprising all the details as well as the empty underlying part section with bluish gray background. The major left part of the top section consists of orkut selling points with magenta color featuring the main words and phrases. The bare white space surrounding the text gives it a simple, non-cluttered and pleasing look.

The top menu bar in dark green color is still accessible around all web pages. Below this really is a section with assorted modules in white background floating in a light blue background. On the serious left may be the menu starting with photo, name, status and other details of the consumer. Below it’s the menu bringing about various pages such as account, scrapbook, and so forth Each of these menu items have an associated icon that may be easy to connect with the name of the menu.

This is and then Apps and other menu things. The account, menus, software and other choices are segregated by a green line. Every text is also in green. It is significant that all the menu titles are in lower caps. Below this kind of module, we have a module to invite close friends using their email or more.

During the page, almost all links will be in blue and when a mouse moves over a hyperlink, there is no change in background color or photo except a great underline below the text. Friend suggestions is another good option mainly because it not only supplies you potential friend list, but also shows photos so that one can confirm in the event that he/she is definitely the same person one understands. It also supplies quick backlinks to view the profile or perhaps add as being a friend. A great X towards the top of the photo can be used to remove it from the list quickly and arrows can be used to navigate through record.

The arrows change to light grey color when one can’t proceed further upon either part. Below this is certainly Updates by my friends section that provides a summary of updates around the friend profile. On the severe right is the “my friends” section using a count of total close friends. It lists about 9 good friends along with their photos and there is the link to view most friends, take care of them, or find more friends.

In addition, it allows for searching friends. To fulfill the space crisis issue, the text box for searching by itself has the caption rather than positioning it exterior. On pressing inside the text box, the caption clears and the consumer can add their particular text to search. Once the account is filled up and many close friends added, the property page can be cluttered with a lot of details. This is and then advertisement which can be followed by “my communities”.

Design of this is just like “my friends”. Clicking the profile link shows the profile specifics. Three dividers – social, professional, and personal are provided to include details about place to place of the user. The cultural tab can be further split up into sections segregated by a extensive white area which likewise consists of an edit switch. Alternate colour pattern is used to make this easy to read each line and each detail with the profile. “My scrapbook” site provides every scraps by friends.

By default, one can view 10 waste on one web page but a drop down package provides other choices as well. Routing links to advance to initial, last, following and previous pages are also provided as backlinks. Each scrap is in its own blue container with picture of friend provided along with friend’s name and message.

Choices to reply and delete the concept are also obtainable. Once a dialogue has been performed through more than one response sold, there is a new link “View this conversation”. Clicking this kind of link grays out the site and unwraps a new box consisting of the conversation details along with provision to delete.

Once again, the background is definitely white with each scrap in a light blue colored box. To close the conversation container, an image with an Times is supplied as well as a close link. A brand new scrap can be typed in very easily through a textual content box. Once again there is no name or caption for the but the same is seen as articles in gray color inside the text container. The scrap can also be crafted in different ‘languages’ which can be quickly chosen from the drop down list.

Adding a community and handling it is related in working to adding and managing good friends in Orkut. 4. Customer survey four. 1 . Process description You are required to the actual following: 1 ) Register themselves 2 . Register 3. Enter into their account details some.

Search for a friend/professional known to these people 5. Add to friend list 6. Search for a community several. Add themselves to that community 8. Indication out four. 2 . Achievement criteria The user should be able to make a profile, put contact(s) and join a community/group. 4. 3. User Profile User one particular is an active internet user and provides prior on-line social networking knowledge.

User two is fresh to computers and internet, this kind of being between his initially experience with social networking. User a few uses internet mostly intended for surfing and finding details and is not a member of any social media site yet although recognizes the common functionalities of such websites just like registering, logging in to the web page, searching, etc . 4. 4. User experience Due to his prior encounter using online communities, user 1 had no problem registering for either of those, adding contacts, searching and registering to get a group. Consumer 1 discovered both sites equally easy to register, put contacts and join community; however , having been impressed by the cabability to add, take away, edit and move segments in LinkedIn and wanted similar options in Orkut.

Also, looking friends in Orkut listed several titles and finding the right one was difficult. Whilst user a couple of was able to make the account and add contacts, the user at times felt shed in Orkut once the associates were added and found it difficult to return to home page. User 2 also found it difficult to easily search the friend and wished there was clearly an easy way like LinkedIn. End user 3 was also in a position to register easily, add connections and join communities/groups. User 3 was not concerned about the down sides in searching friends or perhaps professionals and looked at this kind of as a way to make new friends. a few.

Suggestions Each user turns into an active user or has its own friends/professional associates, the information demonstrated on homepage can be a lot of. Suggestion is always to show the information partly and offer a link to help information or simply just provide backlinks to go to data. By making selected information just like school or college details mandatory, orkut can help simplicity the search process that currently requires searching a buddy from a list of hundreds together with the same name.