UI/UX User Interface & User Experienceexample: www.facebook.com

Prepared by:Pavithra Madushani WickramarachchiLevel-3,102252NMedia and communication DesignDepartment of Integrated DesignUOM

Take FaceBook ( www. facebook.com ) as an example and describe it’s UI/UX related features

ContentsChapter 01General Introduction to UI and UXWhat is UI/UXWhy it is importantYour role as a UI/UX engineer to the IT industry.

Chapter 02Face Book UI /UX evaluationMain elements of the User InterfaceNavigation PatternsProfile information displaySearch functionalityFan PagesChat OptionsAdvertisement ManagementFB Apps and Games

Chapter 03Usability features in FBEase of useLearnabilityEfficiencyUsage as a marketing tool

Chapter 04Responsive design patterns in FBFB Desktop Appearance Different resolutionsFB Mobile Appearance Tablet Pcs and IPads smart Phones

01-04

05-19

20-24

25-29

Introduction to UI and UX

UX design deals with the overall experience associated with the use of a product or service. UI design deals with the specific user interface of a product or service. The UI can be a component of UX, but many user experiences don’t have UIs. The design of a UI will be heavily informed by the UX design. The UX design will be less informed by the UI.

Chapter

01

What is UI/UX

User interface(UI)

“Don’t do to others what others have done to you. Remember the things you don’t like in software interfaces you use. Then make sure you don’t do the same things to users of interfaces you design and develop.”

Tracy Leonard (1996)

What is an interface?

An interface is a space in which two or more objects can come together and interact. A language, for instance, is an interface for two people who want to communicate ideas to each other. The importance of an interface is obvious: it determines how successful and efficient the interaction is. The term “interface” frequently comes up in connection with computers and human-computer interaction. In computer science and technology HI this term can refer to different things. Obvious examples of different interfaces are a user interface and a computer interface.

What is a user interface?

The term user interface refers to how a user interacts with technology. A user interface consists of input and output devices which ensure two-way communication. When a user interacts with a desktop computer, a user interface may consist of a mouse and a keyboard with which the user inputs information and a screen where the user can see the computer's response. A user interface is considered good when a user can achieve desired results with minimum input.

REFERENCE:Pidoco.com. 2014. Interface - by Pidoco. [online] Available at: https://pidoco.com/en/help/ux/interface [Accessed: 20 Feb 2014].

EXAMPLE:

A common example of a hardware device with a user interface is a remote control. A typical TV remote has a numeric keypad, volume and channel buttons, mute and power buttons, an input selector, and other buttons that perform various functions. This set of buttons and the way they are laid out on the controller makes up the user interface.

A user interface communicates with the user. Design of the user interface includes any aspect of the system that is visible to the user. The user interface is becoming a larger and larger portion of the software in a computer system and a more important portion, as broader groups of people use computers. As computers become more powerful, in applying computer-based systems to solve problems is now more often in the user interface, rather than the computer hardware or software.Because the design of the user interface includes anything that is visible to the user, interface design extends deep into the design of the interactive system as a whole. A good user interface cannot be applied to a system after it is built but must be part of the design process from the beginning. Proper design of a user interface can make a substantial difference in training time, performance speed, error rates, user satisfaction, and the user’s retention of knowledge of operations over time. The poor designs of the past are giving way to elegant systems. Descriptive taxonomies of users and tasks, predictive models of performance, and explanatory theories are being developed to guide designers and evaluators.

A good user interface provides a "user-friendly" experience, allowing the user to interact with the software or hardware in a natural and intuitive way. ‘‘user friendliness’’ are yielding to a more scientific approach. Measurement of learning time, performance, errors, and subjective satisfaction is now a part of the design process.

Chapter

01Page 01

Chapter

01Page 01

Chapter

01Page 01

User Experience (UX)

REFERENCE:Pidoco.com. 2014. Interface - by Pidoco. [online] Available at: https://pidoco.com/en/help/ux/experience [Accessed: 20 Feb 2014].

Users have great expectations when they visit Web and mobile applications. They increasingly want an experience that’s valuable, easy to use, aesthetically pleasing, and emotionally satisfying. To retain and gain customers, it has to continually win their hearts and minds by providing them with a compelling user experience (UX) that is useful, usable, and desirable.

What is user experience?

User experience, which is often referred to as UX, is the emotional response a person has to a service or product. The term user experience refers to every aspect of the user’s encounter with the product or service. In the design field, user experience is often enhanced through the user interface of a product. While user experience is largely centered on usability, other aspects, such as the visual design of a product can play an important role.

Advantages/ disadvantages of optimizing user experience

There are many advantages of optimizing user experience. Giving a user a product that is not only usable, but also gives a positive emotional experience can help make an application a success. User experience optimization can be difficult, as the user experience will ultimately be different for each individual. With usability testing, however teams can discover the general design points that affect user experience for the majority of people.

User experience, experience the product creates for the people who use it in the real world. When a product is being developed, people pay a great deal of attention to what it does. User experience is the other, often overlooked, side of the equation, how it works,that can often make the difference between a successful product and a failure. User experience design is a discipline focused on designing the end-to end experience of a certain product. To design an experience means to plan and act upon a certain set of actions, which should result in a planned change in the behavior of a target group when interacting with a product.User experience is not about the inner workings of a product or service. User experience is about how it works on the outside, where a person comes into contact with it. When someone asks you what it’s like to use a product or service, they’re asking about the user experience. Is it hard to do simple things? Is it easy to figure out? How does it feel to interact with the product?

The Elements of User Experience

Visual Design: visual treatment of text, graphic page elements and navigational components

Navigation Design: design of interface elements to facilitate the user's movement through the information architecture

Information Design: in the Tuft an sense: designing the presentation of information to facilitate understanding

Information Architecture: structural design of the information space to facilitate intuitive access to content

Content Requirements: definition of content elements required in the site in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc.

Site Objectives: business, creative, or other internally derived goals for the site

Chapter

01Page 01

Chapter

01Page 01

Chapter

01Page 01

Chapter

01Page 02

Why it is important

“The conclusion: interface inconsistency can cost a big company millions of dollars in lost productivity and increased support costs.”

Jesse Berst (1993)

On the Web, user experience becomes even more important than it is for other kinds of products. user experiences on the Web can be applied far beyond its boundaries.

Web sites are complicated pieces of technology, and something funny happens when people have trouble using complicated pieces of technology: They blame themselves. They feel like they must have done something wrong. They feel like they weren’t paying enough attention. They feel stupid. Sure, it’s irrational.

After all, it’s not their fault the site doesn’t work the way they expect it to. But they feel stupid anyway. And if it intend to drive people away from site (or any product), it’s hard to imagine a more effective approach than making them feel stupid when they use it. Regardless of the type of site, in virtually every case, a Web site is a self-service product. So make it more interactive and give users a better experience is very important.

There is no instruction manual to read beforehand, no training seminar to attend, no customer service representative to help guide the user through the site.

There is only the user, facing the site alone with only her wits and personal experience to guide her.If users have a bad experience, they won’t come back. If users have an OK experience with experience with competitor’s site, user’ll go back to that competitor.

Features and functions always matter, but user experience has a far greater effect on customer loyalty. All your sophisticated technology and brand messaging won’t bring those customers back a second time. A good user experience will and you don’t get much of a second chance to get it right.

We do designs for users. so their interaction and behavior is very important. Now designs are designed centering the user. Designing a user interface design in which the end user is placed in the center of the process. The primary concerns of user-centered design are the targeted end users of the website or the application and which requirements these users will have.

User-centered design ensures that the target users easily understand the user interface and find what they are looking for(user experience).This design aims at creating a product that suits specific user needs and creates a pleasant user experience. User-centered design is becoming increasingly important in web development. Around the turn of the millennium, web products were often developed with little or no consideration of the user. Today, when the usability of a user interface determines its success, user-centered design is a common approach to web development.

So UX/UI is very important at that point to do design to users. Not only that it also important in many ways such as Gaining a competitive edge, Conversion rate is the percentage of visitors who take an action you want them to take ,Reducing development and maintenance costs, Improving productivity and Lowering support costs.

Wallach, D. 2014. User-Centered Design: Why and How to Put Users First in Software Development. [e-book] [Accessed: 23 Feb 2014].

Chapter

01Page 03

Your role as a UI/UX engineer to the IT industry

A UX designer’s work should always be derived from people’s problems and aim at finding a pleasurable, seductive, inspiring solution.

In IT industry it may be a web design, web/mobile application, software, online game social network or any interface, it is designed for a target audience, a user. The results of that work should always be measurable through metrics describing user behavior. UX designers use knowledge and methods that originate from psychology, anthropology, sociology, computer science, graphic design, industrial design and cognitive science. When it is designing an experience, it is in fact planning a change in the behavior of particular target group. It has to found out their problem and it is trying to destroy the burden using design methods.User experience lies at the crossroads of art and science and requires both extremely acute analytical thinking and creativity.

Let’s consider an example: we’re about to create a mobile application to find restaurant in Sri Lanka. As a usability specialist our task will be to Make sure that the person faced with the need to find restaurants and bars will be able to perform the task using our newly designed mobile application. We have conduct a series of user tests and iterate on the best solution. As a UX designer we’re not only interested in a usable mobile application.we want to create something that will encourage people to find restaurants and bars and will provide a unique experience. Again, we’ll iterate on the best solution, but the approach will be broader and the measured result should focus on the user’s behavior. User experience design at its heart is an optimization: an iteratively improved solution to a general.

“In information technology, the user interface (UI) is everything designed into an information device with which a human being may interact including display screen, keyboard, mouse, light pen, the appearance of a desktop, illuminated characters, help messages, and how an application program or a Web site invites interaction and responds to it. In early computers, there was very little user interface except for a few buttons at an operator's console. The user interface was largely in the form of punched card input and report output.Later, a user was provided the ability to interact with a computer online and the user interface was a nearly blank display screen with a command line, a keyboard, and a set of commands and computer responses that were exchanged. This command line interface led to one in which menus (list of choices written in text) predominated. And, finally, the graphical user interface (GUI) arrived, originating mainly in Xerox's Palo Alto Research Center, adopted and enhanced by Apple Computer, and finally effectively standardized by Microsoft in its Windows operating systems.

The user interface can arguably include the total "user experience," which may include the aesthetic appearance of the device, response time, and the content that is presented to the user within the context of the user interface.”

Reference:Searchsoa.techtarget.com. 2014. What is user interface (UI)? - Definition from WhatIs.com. [online] Available at: http://searchsoa.techtarget.com/definition/user-interface [Accessed: 23 Feb 2014]

Chapter

01Page 04

Face Book UI /UX evaluation

Chapter

02

Face book is the world’s largest social network. It connects over 800 million users and continues to grow at a phenomenal rate worldwide. Users on Face book today come from all walks of life, live in different countries not just individuals Face book is also used by businesses, organizations and governments all over the world, to send marketing messages, seek charitable funding and communicate with customers and constituents.

It interacts in over 70 different languages, have varying levels of computer expertise, and have individual expectations when engaging with their social networks. More than half of the active users log on to Face book every day and interact with over 900 million objects, such as pages, groups, and events. people use Face book to Socializing or “hanging out” with friends,Day-to-day news about their friends, acquaintances, relatives, and peer groups, Validation or emotional support and Self-expression and the identity exploration .It focused all its efforts into creating technologies that enable users from all walks of life share information more efficiently, thereby creating a digital map of people's real-world social connections.

Human (user) Insight of Face book is “desire to know about the people around us in our lives and connect and share our selves with others”

Introduction to

Main elements of the User Interface

Element Description

Window

A window is an area on the screen that displays information

Facebook has always been leader of creating fantastic and simple page designs for its users. home page is organized into three columns.

In the middle column is your News Feed, which is all the things that your friends and others you connect with are saying.

The left column is a dashboard of sorts. By default, it’s set to News Feed, but the second option Messages ,changes the middle column to display messages between you and others on Facebook. Below that is a link for Events that shows events that might interest you. Next comes Lists , as well as pages from businesses and organizations that you follow and any apps you’ve installed or groups you belong to. If some of these don’t make sense yet, they will by the time you finish this guide.

The right column contains links to people you may know, including people Facebook suggests you might want to friend (based mostly on Facebook friends in common), advertisements and a ticker with up-to-the-minute updates from your friends. You can hide the ticker by clicking on the arrow at the top right

Structural elements

Chapter

01Page 05

Element Description

Menus

Menus allow the user to execute commands by selecting from a list of choices.

The menu bar on the right side of your Timeline lists the years and recent months you’ve been active on Face book. You can scroll down and fill in your Timeline to display any major experiences that happened during those time periods.At the top, you should notice a horizontal menu bar appear with the options to add a status, photo, place or life event. You can use these to fill in your Timeline.

content anchor link/super menus

Chapter

01Page 06

Input Controls

CheckboxesCheckboxes allow the user to select one or more options from a set.

Radio buttonsRadio buttons are used to allow users to select one item at a time.

Dropdown listsDropdown lists allow users to select one item at a time, similarly to radio buttons, but are more compact allowing you to save space.

List boxesList boxes, like checkboxes, allow users to select a multiple items at a time.

ButtonsA button indicates an action upon touch and is typically labeled using text, an icon, or both.

Dropdown ButtonThe dropdown button consists of a button that when clicked displays a drop-down list of mutually exclusive items.

TogglesA toggle button allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct.

Text fieldsText fields allow users to enter text. It can allow either a single line or multiple lines of text.

Date and time pickers A date picker allows users to select a date and/or time. By using the picker, the information is consistently formatted and input into the system.

Dropdown Button

Checkboxes

Radio buttons

Text fields

Dropdown lists

Buttons

Buttons

Toggles

Chapter

01Page 07

Embedded Posts

Embedded Posts let you add any public post from Facebook to your blog or web site.

CommentsThe Comments plugin lets people comment on any piece of content on your site.

Activity Feed

Displays the most interesting, recent activity taking place on your site.

Recommendations Feed

Displays the most recommended content on your site.

Recommendations Bar

Let people like content, get recommendations, and share what they are reading with their Friends.

Facepile

Display the profile photos of the people who have connected with your Facebook page or app.

Like Button

Let people share pages and content from your site back to their Facebook profile with one click, so all their friends can read them.

Share Button

Allow people to share to Facebook, share with particular friends or with a group. Alternatively, they can share in a private message.

Follow Button

Let people subscribe to public updates on Facebook.

Unique features in FB

Send Button

Let people privately send content on your site to their friends.

Like Box

A special version of the Like Button only for Facebook pages.

Chapter

01Page 08

Information Components

Notifications A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message.

Progress Bars

A progress bar indicates where a user is as they advance through a series of steps in a process. Typically, progress bars are

Tool Tips

A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.

Message Boxes A message box is a small window that provides information to users and requires them to take an action before they can move forward.

Modal Window (pop-up)

A modal window requires users to interact with it in some way before they can return to the system.

Notifications

Tool tips

Messages Box

Progress Bars

Pop UP

Chapter

01Page 09

Navigational Components

Search Field A search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results. Typically search fields are single-line text boxes and are often accompanied by a search button.

Breadcrumb Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.

Image Carousel Image carousels allow users to browse through a set of items and make a selection of one if they so choose. Typically, the images are hyperlinked.

Tags Tags allow users to find content in the same category. Some tagging systems also allow users to apply their own tags to content by entering them into the system.

Sliders A slider, also known as a track bar, allows users to set or adjust a value. When the user changes the value, it does not change the format of the interface or other info on the screen.

Icons An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system. Typically, icons are hyperlinked.

Pagination Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.

Tags

Search Field

Breadcrumb

Icons

Chapter

01Page 10

Navigation Patterns

Face book has given prominence to the navigational items that users will need most often. It considered separating the most important navigational menus out from less important ones. Used text size, contrast, and rollover effects to add further distinction between primary and secondary navigation menus.

Three key points related to navigation:

1.Content First

If the content is lacking, even impeccably designed navigation can’t provide staying power. After the content is created, it should build navigation that can guide the user experience.

Navigation Supports Content

Menu ,Breadcrumbs ,Filters ,Links (Refer page 09)

2.Placement

The placement of action choices on the page impacts how people respond

Horizontal Navigation

Since we read text across the page, the horizontal navigation bar is easy to scan. It has become a convention that users understand and expect.

Vertical Navigation

The vertical navigation on the right side helps orient the page position, and it provides links to jump to specific content.

3.Clarity

Clear writing helps people navigate. In essence, a website is a pre-recorded communication from the developer to the user. The message needs to be understood from start to finish.

Examples include an intuitive menu, clearly labeled links, and “you are here” indicators. When the right convention is not available, a simple and direct explanation should be used. Within the navigation structure, clarity should not be sacrificed for creativity.

Top navigation bar

Left navigation bar

Chapter

01Page 11

Navigation is used to describe how a user travels through a software application or system in order to find the information or service he is looking for. Many applications have a navigation bar in which the individual pages are categorized so that they can be found easily.

How does navigation affect user experience?

The easier it is for a user to navigate through a website or software application, the faster he will find what he is looking for. When navigation is optimized, user frustration can be minimized and conversion rates are often increased. Many websites, especially retail websites include numerous links towards the sales section to ensure that the navigation paths to those pages are optimized, which also increases conversion rates

In Face book

Navigation labels that reflect the questions that users are likely to have in their minds at that point in their journey.

Use different design methods to funnel people towards the answers they’re looking for

Face book has used used top level navigation .it bnot only raked a process or question sequence down into stages, then this will be easily understood by visitors.

Lastly, visually group related information and facilities together as this will focused users’ attention within this particular area and increase the likelihood that they will see it, find it, and use it.

Design for the usersAll navigation in Fb make user to navigate easier.

FB Provide a variety of navigation optionsas different readers have different preferences on how they like to navigate around a website. Therefore, to accommodate a variety of readers and their navigation requirements, a range of navigation options has offered in FB.

Readers turn to navigation when they're confused or lost. FB doesn’t confuse users further by displaying inconsistent or unfamiliar navigation design. Consistency for classification is critical for successful navigation.

Navigation design has

consistent classificationconsistent graphical navigation designconsistent hypertext colors

FB doesn’t surprise or mislead the readerNever ask the reader to do something it is impossible or difficult for them to do.

when it type letter it automatically filter the friends

Chapter

01Page 12

Profile information display

Face book play a major role in attracting users. User have a Profile‘page where users put information about themselves.

Face book gives you lots of control over what appears on your timeline(and can also control it to display all information to a particular group of friends, and hide some from another group), including the posts and activities presented by year in the little timeline on the right-hand side. It encourages users of all ages to curate that timeline thoughtfully at least go through it and see how public each entry is because this feature makes it a lot easier for people to find old posts and activities of yours.Users have the option of making their profile as private as possible,

The profile page is the main source of information for each person. A user‘s display picture along with all of their personal information is listed on the profile page including but not limited to their name, age, sex, political views, religious views, education info, work info, interests etc. In addition to this information, clicking on different tabs in a profile lead to different pages of the website, related to the user who profile is being viewed.

It can Selectively Display Facebook Information using privacy controls.you can choose with whom you’d like to share certain information with Facebook-defined presets, e.g., Everyone or Friends of Friends. For the purpose of this tutorial, we want something more granular, so, in the drop-down box, select Customize.

In the following box, you have two choices:

1.Allow certain people (or lists of people) to see that information

2.Select certain people to hide that information from

Chapter

01Page 13

Search functionality

Search is a tool to find people and content on Facebook.With Graph Search you can look up anything shared with you on Facebook, and others can find stuff you’ve shared with them. Each person sees unique results.

when there is rouble finding what you're looking for when you search Facebook, it can try filtering your search results

When you start typing something into the search bar at the top of Facebook, you may see a dropdown menu with suggestions. It uses the keywords you enter to guess what you're searching for so you can find it faster.

Chapter

01Page 14

Fan Pages

Facebook Pages are an innovative way for businesses, artists, brand stores, and many different organizations to market themselves to the 300 million or so users of Facebook. This can be done at no extra charge, and any registered Facebook user can make a Facebook page.

Like the example pages of musicians and artists have a fan-following in the millions. Certain TV shows also have their pages through which they disperse important information about the show plot, show timings etc. Fans of a particular page can share information on that page with all of their friends, thereby spreading the word and marketing the product even further.

Chapter

01Page15

Chat Options

At the bottom of the right column of interface there is a Chat area where you can have a live text or video chat with friends who are online at the same time you are.

Facebook provided its users with the luxury of real-time conversations. Faceook started the facebook chat feature that allowed users to take advantage of an IM-like feature embedded in the website that could be used to chat with any of their friends when they were simultaneously online. This revolutionized the way people communicated on Facebook since now instead of waiting for a reply to a previous wall post, users could just go online on Facebook chat and send instant messages to their friends. This feature didn‘t really do away with Wall posts or private messages, rather it just complemented them and made Facebook a powerful source of communication, both in real time and offline

In chat list it also preview on line off line with green colour dot ,the time they left off line,log in mobile or web,where he is .it also provides many interesting icons ,emotions,smilies whre you can use while chatting to express your moods.

Fb has also provide the facillities to limit the chat option as you desires.

Chapter

01Page 16

Advertisement Management

A significant amount of advertising is done through Facebook nowadays and this advertising is built around the following parameters: the location of users, keywords pulled out from a users‘ profile, their connections, their relationship status, their age, their birthday, education qualifications, their gender, and workplace and even the language they speak. This is known as targeted advertising that targets specific groups of people with relevant products. This feature can also be used by everyday Facebook users at a nominal charge to advertise any cause/event that they might want to spread the word

Managing & Editing Ads & Campaigns

Ads manager is where you can view, make changes and access performance reports for all your campaigns and ads. The Campaigns & Ads tab on the left side will give you an overview of your ad campaigns. These metrics are specific for the advertising objective you’ve previously chosen when creating the ad such as Page likes.it can Change the status next to any ad campaign to pause or stop it.By click on any campaign name to see a more detailed breakdown of specific ads within that campaign.Once you’ve specified the dates and type of ads you’re interested in, the selected data will be shown in the graph. This graph let’s you see how you’re performing against your chosen advertising objective.

In ads manager, it can view all of ad campaigns, make changes to bids and budgets, and pause or restart ads at any time. It can also find r billing manager containing your payment history and payment method information, and export ad performance reports from the Reports tab.

Chapter

01Page 17

FB Apps and Games

Facebook is home to many applications or little software programs that workwithin the service. On a typical day, Facebook users install more than 20 million apps and each month more than 500 million people use a Facebook app.Apps can be games, music services, news sources, quizzes or almost anything else that can be programmed on a computer.

sometimes have access to your Facebook information, and there are some games that are able to share some of that information with your friends or others who play the game. But, as with other aspects of Facebook, you have control over what information they can access.

You can review and change any permission from the App Settings page, whichyou can get to by clicking on the down arrow next to Home, selecting Account Settings and then clicking on Apps on the left side of the page.At this point, you’ll see a page with a list of your installed apps with the ability to edit settings for any of your apps.

Some of the app settings are required (the only way to remove them is uninstall the app) but others can be removed or changed.

A Facebook application or app is a small program that could be added to the general Facebook interface to provide some additional functionality to a certain profile. Addition of Facebook apps is completely dependent on the user‘s choice and individuals have the preference to add what apps they want to add or not. Facebook apps allow users to customize their profile pages and that is the sole criteria of the apps that make it popular.this application and games give entertaining experience to users as well some application are very usefull to them in different purpose.

Chapter

01Page 18

Conclusion If your Web site is sluggish, ugly, busy, frustrating, or boring, then it’s providing a poor user experience, and customers will likely go elsewhere. When it comes to Web sites, many make the mistake of thinking that user experience design is just about one thing, like user interface design, or usability,or visual design, or performance. But it’s about all of these elements working together (or not) to influence the user’s perception of your Web site. Face Book gives good UI /UX all together with Main elements of the User Interface, Navigation Patterns, information display, Search functionality, Fan Pages, Chat Options,FB Advertisement FB Apps and Games.

When a user first experiences an application, it takes some time to figure out the interface, controls and how to perform tasks. As the user continues to perform similar tasks, she learns how to operate the application more effectively and saving time.but to keep them and to provide better experience with the site it has to have apply many things.

In Face book it has used many unique and interesting features to give better experience and interactiob to users.

Chapter

01Page 19

Usability features in FB

Chapter

03

Usability is a concept in user interface design that refers to how effectively and efficiently a user can interact with a user interface. The term usability incorporates a few other concepts, such as learnability and usefulness. The usability of an interface is one of the most important criteria of a user interface in user-centered design.

Ease of use

FB Reduce unnecessary mental effort by the userUsers are able to concentrate on their task without worrying about how the tool they are using. If users have to invest too much mental effort in working out how to operate, they will be less efficient and make more errors. But face book always guide you(text box). Users not have to remember information from one part of the system in order to use another part. Instructions for the use of the system should be visible or clearly retrievable whenever appropriate.(refer page 7 & 8) FB Provide adequate navigation mechanismsProvide enough relevant information for users to know where they are. FB has achived by using range and location indicators such as scroll bars . Other mechanisms, such as providing a navigation map, overview, or history of areas visited (bread-crumbs).

There are clear and easy routes between the different windows, users need to access for particular tasks. It provided in a form which is appropriate for the user at each stage of a task.Users often choose system functions by mistake and should be provided with a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue.(refer page 10 ,11 & 12)

FB Let the user driveThe user can select the information they need in a sequence which is convenient to support each individual task. The system provide as few constraints as possible on how the task is achieved,and provide simple ways to achieve frequently performed tasks.

FB Present information clearlyArrange on-screen information so as to increase the user’s ability to discriminate between different items and groups of data, through the use of spacing, boxes, layout and visual coding techniques.

FB IS helpful to users The information on the window expressed in terms of the user’s task. Fb use tool tips for buttons labelled with an icon.The initial on-line help provided relate to the specific context of interaction on the window. It is task-oriented, listing the concrete steps to be carried out. .

The easy to use site should be intuitive and clearly navigable, should make it easy to access information via useful search function and well thought out information hierarchies/ categorizations within and between site sections (helping users “guess right” when looking for something);

There is no distraction in Fb, it is very easy to pursue your goals on FB. For example, choosing the top navigation, you can quickly come to home /profile in a second. Besides, sub navigation also provides you easy access to any where you wish to visit in FB as we discussed in chapter 2 .

Face book is Design for the users and their tasks.it is user-centred and task-oriented.

FB is consistentIt minimise the learning requirements for users, make the behaviour of common interface elements and dialogue boxes as consistent as possible.it will take users time and effort to learn it and get used to it. FB Use simple and natural dialogueThe dialogue between user and system follow the natural sequence implied by the task. There is no more information presented to the user than is necessary to complete the current task, because each item of irrelevant information adds complexity to the dialogue.It can select preferred language and it used the vocabulary of the intended audience. Terminology is defined so that the same term always has the same meaningand it always address user and it speaks to user.

Chapter

01Page 20

Learnability

What is learnability?

Learnability is the ease with which a software application or product can be picked up and understood by users. The better the learnability of an application, the less training and time it will take for a person to use it.Learnability is important, because it is closely linked to usability. It is vital that users can pick up how to use an application quickly. Learnability can be optimized by creating simple user interface designs that are predictable in layout and navigation. A great way to improve learnability is by finding out what the expectations of your users are before they use the application.

As we discussed in chapter 02 Face book is modern and fresh, the layout is classical and in line with what we are familiar with.At the top right , tells us where we are. On the top left , there is a search field, allowing us to search the site for any random term. there is the left navigation menu featuring the different categories of the site. When clicking, we get a dropdown menu with all the content available within that category.The site is very clean and easy to navigate. The familiar layout helps people to quickly find what they are looking for.

This is a long process in FB.but it is simple to learn.user’s trial and error to figure them out and guide them. It makes use of what people already know, or create something new that is easy to learn.By using familiar design and elemnets it fulfill visitors’ expectations. This way, It helps users to reach their goals more quickly. Keep it simple and visual also help people to sucsess this.

Chapter

01Page 21

FB Immediately provide users with a sense of site purpose and mission Show users where they are, where they’ve been and where they can go through the use of standardized linking conventions, and with expected, logically ordered placement and labeling of menus and buttons.

Design layout and visual presentation is consistent and uncluttered in order to offer clarity and minimize users’ need to memorize (long term) and remember (short term); Structure content for “scannability” by breaking up information into small chunks with descriptive headlines (“chunking”), utilizing the “inverted pyramid” approach to writing content (the most important information comes first), highlighting important points..

FB Place the most important links and content “above the fold” and allow for drill-down depth so that users can immediately get the overall picture and then choose to read more if so desired.

FB Give them a clearly identifiable “escape route” or “breadcrumb trail” to bring them back to a familiar “Home Base” such as the Home Page.

Efficiency

In order for a site to be either useful or easy, the site has to technically work in the first place and help users perform tasks quickly and successfully. Thus, the efficient site will be technologically sound, accessible and flow well.In order to be technologically sound , the site should be error-proof (e.g. no missing pages, broken links, or non-working advanced scripting), cross platform and cross-display compatible, and should degrade well on older systems and lower speed connections.

Page loading times should be minimal (ideally less than 5 seconds on a 56K modem), forms should function and there should be high system visibility that keeps users updated on system status when downloading assets, loading new pages or encountering errors .

With varying degrees of attention (determined in part by a site’s target audience) Universal Accessibility requirements should also be considered for those who are physically challenged by vision, hearing or mobility impairment; technologically challenged due to economic status or locale; or comprehension challenged language due to native tongue.

Finally, the site should flow well , helping users to accomplish tasks quickly in a variety of ways:

•Present steps in a linear process in clear, well-ordered fashion.•Provide users with visible, easy, well-arranged controls.•Help users avoid needless scrolling by making page sizes appropriate for content,and on longer pages by including links that bring users to other places on the same page (i.e. “back to top” buttons).•Incorporate shortcuts and mouse/keyboard equivalents where appropriate Include value-added, context sensitive help.

The placement of all the important parts of FB ontent is perfect. When users visit the FB their eyes directly fall on the important content. It has Create and place to grab attention of users.

Chapter

01Page 22

Usage as a marketing tool

3. Hosting Facebook ContestsRunning Facebook contests, sweepstakes, or promotions is another Facebook marketing tactic that can increase fans and brand awareness.

4. Facebook Promoted PostsFacebook Promoted Posts let Facebook page owners pay a flat rate in order to have a single post reach a certain number of users, increasing a specific post’s reach and impressions. While the flat rate simplifies the process, Promoted Posts lack the targeting options offered by other Facebook ads.

5. Sponsored StoriesSponsored Stories are a type of Facebook ad that shows a user’s interactions, such as a Facebook like, to the user’s friends. Sponsored Stories seeks to capitalize on the “word of mouth” concept. If a user sees that three of his friends like a certain page, he is more inclined to pay attention. The goal of Sponsored Stories is to have a user take the same action as their friends. Advertisers can choose to show friends

6. Facebook Open GraphFacebook Open Graph lets businesses label a user’s action with their app. Billions of interactions are posted with Facebook Open Graph every day. Businesses can create third-party apps that connect to a user and post a notice on Facebook when a user performs a specific action with the app. Facebook’s Open Graph allows for creative interactive options outside of the standard “like” and “comment.” Posts can suggest that users “listen,” “taste,” “read,” it’s up to businesses to get creative.

7. Facebook Exchange (FBX)Facebook Exchange lets advertisers take advantage of ad retargeting on Facebook through real-time bidding. Advertisers can target audiences based on web history data when a user visits a product page on a retailer’s website, but fails to make a purchase, the retailer can then display an ad for that same product on Facebook with FBX.

More than just a meeting place for friends, Facebook has grown into a venue for businesses to market themselves through interaction with customers and self-promotion.Facebook is a powerful marketing tool . it’s a great space to keep customers informed, develop brand identity, and broaden your reach.

1. Facebook Business PageA Facebook page is a great free marketing tool for businesses. These pages let businesses identify themselves not just through listing product offerings and services, but also by sharing links, images, and posts on a customizable page to give a better sense of a business’s personality and character.Facebook business page is a great spot to develop brand identity and show your human side.

2. Facebook Advertising: Classic AdsFacebook offers its own form of advertising with Facebook ads, which appear in the side columns of the Facebook site. These classic ads are referred to more specifically as Marketplace Ads. Using Facebook advertising to increase “Likes” can be very beneficial once a user likes your page, they essentially become followers of business page, and posts will appear on their Facebook news feed. This results in more users interacting with brand, forming relationships that may end up translating to conversions in the future.

Chapter

01Page 23

Facebook Business Page

Facebook Advertising:

Hosting Facebook Contests

Facebook Promoted Posts

Sponsored Stories

Facebook Open Graph

FBX

Chapter

01Page 24

Responsive design patterns in FB

Chapter

04

�esponsive Web design that adjusts to the user, from varying browser sizes to changes in device. Responsive websites work by using media queries to detect the device or the resolution of the device being used to access them. A combination of flexible images, type, and grids adjust to fit the screen on which the site is being viewed. This is popular among users because of the number of tablets, iPods, and smart phones are in the market. The number of users accessing the Internet via a device other than a desktop computer is rapidly increasing, making it necessary for developers to think about all the different ways their information is being viewed. Although responsive design is a very popular for web page design, in some application the layout is typically designed specifically for the target interface (phone, tablet, desktop). Face book has designed interfaces specific to phone, tablet, and desktop. It is not really responsive design

FB Desktop Appearance

Different resolutions

Chapter

01Page 25

Face book has designed interfaces specific to phone, tablet, and desktop. It is not really responsive design.In different resolution it gives follow appearences .

320 X480

640X960

1024X768

768X1280

Smalldesktop 1280X1024Large Desktop 1680X1050

FB Mobile Appearance

Facebook behaves on desktop versus mobile. Such a complex desktop site would not work at all on mobile, so the way the information and functionality is presented to a user has to be rethought.

Tablet Pcs and IPads

Chapter

01Page 26

1024X768 ipad

It should aim to optimize the layout and design for larger screens like desktops, medium screens like tablets, and small screens like mobile devices. But screen size is not the only consideration. Some devices have higher resolution displays than others, which brings a whole host of issues. It has to ensure that images can look sharp and crisp on higher resolution screens, without file sizes becoming unacceptably

Chapter

01Page 27

1024X768 ipad

smart Phones

Mobile devices not only have less screen space available than desktop counterparts, but in general they also have less processing power available, and slower network speeds. It is simplify, reduce, optimize. Face book behaves on desktop versus mobile. Such a complex desktop site would not work at all on mobile, so the way the information and functionality is presented to a user has to be rethought. In mobile version it has changed navigation patterns, lay out, information architecture, interface elements to give better experience and easy access to users.

So it has to consider on •Adjusting columns and column widths•Resizing images to suit the screen resolution•Serving up lower-bandwidth images to mobile devices•Simplifying page elements for mobile use•Hiding non-essential elements on smaller screens•Providing larger, finger-friendly links and buttons for mobile users•Detecting and responding to mobile features and device orientation.

Entering data may be painful experience for users on mobile phones than it is for desktop users. For an acceptable experience it likely have to provide radically different input mechanisms, for example letting users choose from preset options or popular choices wherever possible, and avoiding text entry.

Face book is providing an optimized layout for devices in portrait and landscape mode.

Chapter

01Page 28

640X960DVGA-iphones

They are experimenting and it recently adds some features as responsive design to face book. This shows face book also to make it responsive design. As it has many information and content it is a big task. But Face book try to incorporate with this update a smooth, harmonious design across all mobile and desktop outlets.

As illustrated the Off Canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it.

This pattern is showing up in a few separate mobile Web site designs and native mobile applications.

Chapter

01Page 29

References

Bamagazine.com. 2014. Before & After | PDF articles. [online] Available at: http://www.bamagazine.com/Articles.asp?ID=308 [Accessed: 17 Feb 2014].

Facebook. 2014. Welcome to Facebook - Log In, Sign Up or Learn More. [online] Available at: https://www.facebook.com/ [Accessed: 24 Feb 2014].

Google Books. 2014. User Experience Re-Mastered. [online] Available at: http://books.google.lk/books?id=URgdIJSLlrkC&printsec=frontcover&dq=user+interface+and+experience&hl=en&sa=X&ei=PKULU_GeH4Pn0gGYpICgCw&ved=0CEcQ6AEwBA#v=onepage&q=user%20interface%20and%20experience&f=false [Accessed: 19 Feb 2014].

Khan, J. and Khan, J. 2012. 45 Free and Fresh Web User Interface PSDs. [online] Available at: http://www.1stwebdesigner.com/freebies/45-free-web-user-interface-elements-psd-files/ [Accessed: 22 Feb 2014].

YouTube. 2014. Principles of Mobile Interface Design. [online] Available at: http://www.youtube.com/watch?v=QDk3SYboxZo [Accessed: 20 Feb 2014].