“I’ve seen your Facebook album! The party was really interesting!” ”Uhh I noticed you update your relationship status 😉 How is that guy like?” “Haven’t seen you tweeting these days, are you alright?” As the popularity of Social Networking sites grows in an overwhelming speed, these kinds of dialogues appear more often in our daily life. Conventions, norms and rules of communication have been tremendously changed.
These sites allow users to develop profiles of their backgrounds and interests, communicate with friends and strangers, and share thoughts, photos, Internet links, music, and more. Many users say the sites are good for our society, but others contend that the dangers of social media outweigh the benefits. Here are some lists of arguments of pros and cons with Social Networking sites.
- They allow those who are shy or have trouble making friends to socialize more easily. That’s also true for those with disabilities.
- They bring people with common interests together to connect and converse , offer exposure to new ideas from around the world.
- They allow for creative expression in a new medium. They provide free messaging, blogging, photo storage, games, event invitations, and many other services to anyone with access to a computer and the Internet.
- They allow people to reacquaint with old friends or those who live far away.
- They allow businesses and public entities to share information with customers and clients, and to market themselves inexpensively.
- They entice people to spend more time online and less time interacting face-to-face. The sites offer many time wasting activities that supplant more productive activities.
- They allow unscrupulous people to misrepresent themselves, take advantage of others or spread false news.
- Teens growing up with these sites may not be aware that the information they post is public and that photos and text can be retrieved even after deletion. Consequences from over-sharing personal information include vulnerability to sexual or financial predators and lost job opportunities from employers finding embarrassing photos or comments.
- Social networking sites have no way to verify that people are who they claim to be, leaving people vulnerable to solicitations from online predators who are able to mask their true identities. Thus cyberbullying is increased.
- They give hackers an opportunity to steal and misuse personal information, especially if users don’t correctly install privacy filters. And even with those safeguards, posted information is never fully secure.
As for myself, I used to use social networking sites to post photos shoot by myself and find people who have the same interests with me. Sometimes I also use it to make connections with friends from primary school, etc. I believe it’s not safe enough to reveal every part of one’s personal life so I never touched on life within my family. It’s good to have a easy way keeping contact with one’s friends who scattered around all over the world, but overuse of social networking sites will cost troubles. From my point of view, face to face communication is always the most important and effective way of understanding others.
We present this week on the topic Evaluation Method: GOMS.
Cognitive science is the study of minds, in particular, human behavior and information processing. This includes understanding, remembering, reasoning, attending, being aware, acquiring skills and creating new ideas. Attempts have been made to establish a relationship between cognitive science and human-computer interaction (HCI) to predict human performance through the use of design technologies. The aim of this is to understand how knowledge transmission can take place between humans and computers and how through the use of technologies, human’s competency could be enhanced and weakness compensated.
Before I go into the challenges of learning and how can the use of technology enhance user experience, I would to share a video about the Kinect Effect.
From this video, we can see the advancement of technology such that now, there are substantial human interaction with technology, rather than the pure clicking of the mouse and browsing through highly stimulating websites. The Kinect technology not only provides entertainment, but it can assist work processes and help humans accomplish things which will be impossible without the existence of technology.
Challenges of cognitive learning
All user interfaces make cognitive demands on users and hence through the use of technologies, we aim to reduce cognitive overload. Cognitive overload occurs when the learning task exceeds the processing capacity of the cognitive system. Hence, successful user interface designs ought to acknowledge the limitations of cognitive processing. There are three challenges to keep in mind throughout the design process.
1. Contextual complexity
Are the new concepts that users have to learn too complex? How efficient can the mind link the new concepts with his past learning experiences?
2. Memory load
How much information must users store in their short-term memory without exceeding its optimum capacity? How much new information (e.g. commands, procedures) do they have to process?
Do the users feel at ease when viewing at the information put on screen? How good is the user interface at capturing the user’s attention? If the user is distracted by other work, will he continue their interaction with the system once they are free of that distraction?
Enhancing the user experience
Ease of usage
Users appeal to the visual aspects of a computer interface primarily. Hence, it is crucial that there should be ease of reading of screen images and content. If not, users would be deterred from using it and switch to a friendlier user interface that is more conducive for learning and interaction. For example, a simple classic design (shown on the top diagram) would appeal more to the masses rather than a ‘congested’ layout with highly complicated functions (shown on the bottom diagram).
Good website interface
Bad website interface
Consistency of programs
Graphical user interface takes advantage of the ability to display information on the computer screen. For example, a toolbar of icons could be utilized as they are representatives of popular actions taken also creates convenience for usage. The toolbar is constantly on the screen and it reduces the user’s need to memorize a set of actions and commands. The use of consistent terms and colours will increase the ease of usage. New, yet complex, interface will only serve to let users fumble on the new functions and requires time for them to familiarize with the new terms and commands. Successful systems tend to require users to spend the shortest time to get used to their system. In addition, associating universal commands with function such as “Help” by connecting them to speak to a live agent, or an associative online help page would improve user experience and satisfaction.
The use of images is important is interface design as the brain is better at recognizing images than words. It captures the user’s attention faster and helps the brain relate to concepts easier. Graphical illustration thus serves to create a visual image and helps user to understand the concepts presented rather than mainly text. Users also tend to be more attracted to reading text with images than purely text. Images tend to be appealing and will tempt the user to continue reading.
In conclusion, incorporating technologies into learning creates a more different and interactive form of learning as users can be more focused through the use of graphics illustrations like animations and hands on experience. This is in contrast with traditional form of learning through books whereby users tend to drift off due to the lack of ‘interaction’. Though these technologies enhance learning, we should also consider that the way technology appeals to different individuals. Every individual perceives technology differently, hence the design of interface should be taken into account. With advancement technologies like Kinect, there is hope for more complex technologies to be developed to enhance human’s way of living.
On the last lecture, we had a session of product conceptualizing. This session is split up into 3 different parts. Firstly, brainstorming then came the second part, which will be coming up with the scenario and storyboard, lastly, prototyping phase.
This part is actually the most challenging part of the session, as we have to brainstorm a new type of communication device within 10-15 minutes. We have several ideas such as using brain wave/ brain power to communicate with one and another, using a ipod/ipad similar device to help the mute and deaf in communicating with normal people who do not know sign language. We then started to rate and rank these ideas according to their feasibility and extension of use. In the end, we decided to go ahead with the idea of having a handheld device that will aid deaf/blind/mute in being understood by normal people that do not have knowledge of sign language. This device will works as a translator.
We are asked to combine with another group to form a bigger group. With this formation of bigger group, we shared our ideas and concepts about out initial communication device. Thus, with the exchange of ideas, we decide that it will be more beneficial for the user if we combine both of our idea together.
Scenario and storyboard
Coming to the second part of the session. During brainstorming, we have already decided that our user will be people with communication difficulties. This helps us to focus on our scenario and storyboard, as we know who will be the casts. We come up with a storyboard whereby the user is trying to communicate with a passerby and the passerby does not possess the knowledge of hand language. The user will then take out his/her communication device to aid the passerby to better understanding of the user.
After the second part of scenario and storyboard, we have come to the last part of the session, which is prototyping. We use a masking tape and maybe 30 cm string to tie the handheld device to our neck. We decide to create a low-fidelity prototype as the material given to us is quite limited and time is a factor too.
What did you learn from the activity?
We have learned that coming together as a group and do product conceptualizing is very difficult as there are many different and conflicting ideas. We need contribution from everyone and we do not want to silent off someone, trying to obtain this balance is difficult. We learned that we should always do the conceptualizing part by part so that the whole group can understand and give us time to fully digest it.
What was good and what can be improved?
The idea of having class participation is good and is certainly entertaining and allows us to have fruitful insight of doing product conceptualizing. I believe that time management and coordination of team could be further improve.
Our group use masking tape and string for our prototyping. I believe that this prototype is sufficient in bringing across the idea that we want to have a hand held device and how and when we will be using it but nevertheless this prototype lack the detail of how a handheld device would be, for example where the button should be placed and e.g.
I would like to show this video to show what are other interesting way to prototyping..
“A survey is only as good as the clarity of your terms, the directness of your questions, and the relevance of your answer choices.” -inow
A questionnaire or survey takes the form of carefully selected questions that want to elicit honest and specific opinions from the participant. These opinions are important to generate statistics about a product or service for analysis. If the opinions are dishonest or vague, it will badly affect the outcome of our analysis. The above quote tells us a few key points to look out for when we create our questions.
2. Good Questions vs. Bad Questions
Here are examples of bad questions as opposed to their good counterparts.
- Do you think you will take a long time to use this function?
- Rate on a scale of 1 to 7 how much time you think it will take you to use this function. (1-short, 7-long)
In this example above, the good example not only asks for a rating so participants can more specifically rate their response, but it also balances rating scale with 1-4-7 where 4 is the middle-point. The good example also avoids asking with a biased leading question, which the bad example does when it implies to the user to think that he will take a long time to use that function.
- Which design do you think is best?
- Which design do you think is the prettiest and most easy to use?
In this second example, the bad part asks a very generic question that may be understood differently for each user. For some users, ‘best’ might mean prettiest, whereas for others it might mean the easiest to use. To clarify this, a good question should ask specifically and clearly what the user needs to consider.
- Which feature in the list would you dislike to see in a product you would find hard to use?
- Which feature in the list would you like to see in an easy-to-use product?
In this third example, the bad part asks a double negative question, and by doing so will confuse the participant and cause misunderstandings in the question. This question can be worded properly in the good part without using double negatives.
- Answer Yes or No. There is no sorting mechanism you can see in this tool.
- Answer Yes or No. Do you see no sorting mechanism in this tool?
- Answer Yes or No. Do you see a sorting mechanism in this tool?
In this fourth example, the first bad part is not even a question, but an assertion. As such, it is important to remember to ask questions rather than assert them. Also in both bad parts, the answer to be given is ambiguous in relation to the question. Some people would answer ‘No’ to a question asking for a ‘no’ as their way of confirmation, whereas other people confirm by answering ‘Yes’ to a ‘no-question’. This is how people interpret differently so misunderstandings will cause many to answer wrongly.
Not all the important parts were covered in the above examples, but in summary, a good survey or questionnaire needs:
- Use simple words
- Correct grammar
- Common understanding with and about the participants
- Avoid leading questions
- Avoid double negatives
- Ask questions, not assertions
- Balance rating scales
- Make choices list simple and short
- Alignment of questions, choices and answer boxes should be consistent
- Avoid open-ended questions (give choices instead of written)
- Put questions in logic order (helps mind flow)
What happens when you do not have a common understanding about the participants:
Surfing the Internet gives opportunity to a user to be exposed to an infinite number of websites online. Many websites started out simple and bleak in the beginning of the Internet Age, but as the years brought forth greater user demand and experiences, it is now a sin to show that level of workmanship. Web design is the art of designing the layout, content and appearance of a website. It shows users the essence of, and even influences decision-making, response and likability to the company or persons hosting it, apart from just the website.
A good web design is vital to the host and delivers a quality user experience, which is a factor in eventually assisting the host’s purpose for a website. Poorly designed websites bring great costs otherwise, by affecting sales or reputation, or even both.
2. Good Web Design
Examples below have neat, clear and visually appealing outlooks.
For a good web design, user satisfaction is of the utmost importance, since the website is essentially created for the user. It is over-assuming to say that all users have the same kind of satisfaction needs, but generally satisfaction requirements will require following this guideline:
Essential Good Web Design Criteria:
- Neat and Concise Layout and Prioritization of Content and Menus
- Rich, Precise and Relevant Content
- Visually Appealing Graphics
- Good and Clear Navigability of Menus and Links
- Good Color Combinations
- No Distractions, No Confusion, No Junk
- Fast Loading Speed
- Central Consistent Theme/Style
Detailed explanation of each criteria is given extensively below in the list of essential ‘Good Design Features’ by Robin Williams:
- Background does not interrupt the text
- Text is big enough to read, but not too big
- The hierarchy of information is perfectly clear
- Columns of text are narrower than in a book to make reading easier on the screen
- Navigation buttons and bars are easy to understand and use
- Navigation is consistent throughout web site
- Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
- Frames, if used, are not obtrusive
- A large site has an index or site map
- Link colors coordinate with page colors
- Links are underlined so they are instantly clear to the visitor
- Buttons are not big and dorky
- Every graphic has an alt label
- Every graphic link has a matching text link
- Graphics and backgrounds use browser-safe colors
- Animated graphics turn off by themselves
- Pages download quickly
- First page and home page fit into 800 x 600 pixel space
- All of the other pages have the immediate visual impact within 800 x 600 pixels
- Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
- Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages
3. Bad Web Design
Examples below are untidy, full of distracting advertising, bad color schemes and visually unpleasing.
Committing sins of web design occur when the fundamental criteria of good web design are evidently reversed. Users will find the experience frustrating, offensive, distracting or confusing. It is important to know that a website is not generally bad if it fails to fulfill a good criteria, except when it actually does the reverse of a good criteria and causes grief to the user. Generally, bad web design criteria is as follows:
Sinful Bad Design Criteria
- Untidy and Scattered Layout without Prioritization of Content and Menus
- Poor, Chunky and Irrelevant Content
- Visually Unpleasant
- Bad and Unclear Navigability of Menus and Links
- Offensive Color Combinations
- Contains Distractions, Confusing and Junk
- Very Slow Loading Speed
- Inconsistent Theme/Style
Detailed explanation of each criteria is given extensively below in the list of ‘Bad Design Features’ by Robin Williams:
- Default gray color
- Color combinations of text and background that make the text hard to read
- Busy, distracting backgrounds that make the text hard to read
- Text that is too small to read
- Text crowding against the left edge
- Text that stretches all the way across the page
- Centered type over flush left body copy
- Paragraphs of type in all caps
- Paragraphs of type in bold
- Paragraphs of type in italic
- Paragraphs of type in all caps, bold, and italic all at once
- Underlined text that is not a link
- Default blue links
- Blue link borders around graphics
- Links that are not clear about where they will take you
- Links in body copy that distract readers and lead them off to remote, useless pages
- Text links that are not underlined so you don’t know they are links
- Dead links (links that don’t work anymore)
- Large graphic files that take forever to load
- Meaningless or useless graphics
- Thumbnail images that are nearly as large as the full-sized images they link to
- Graphics with no alt labels
- Missing graphics, especially missing graphics with no alt labels
- Graphics that don’t fit on the screen (assuming a screen of 800 x 600 pixels)
- Borders turned on in tables
- Tables used as design elements, especially with extra large (dorky) borders
Blinking and animations
- Anything that blinks, especially text
- Multiple things that blink
- Rainbow rules (lines)
- Rainbow rules that blink or animate
- “Under construction” signs, especially of little men working
- Animated “under construction” signs
- Animated pictures for email
- Animations that never stop
- Multiple animations that never stop
- Counters on pages — who cares
- Junky advertising
- Having to scroll sideways (800 x 600 pixels)
- Too many little pictures of meaningless awards on the first page
- Frame scroll bars in the middle of a page
- Multiple frame scroll bars in the middle of a page
- Unclear navigation; over complex navigation
- Complicated frames, too many frames, unnecessary scroll bars in frames
- Orphan pages (no links back to where they came from, no identification)
- Useless page titles that don’t explain what the page is about
- Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
- Frames that make you scroll sideways
- No focal point on the page
- Too many focal points on the page
- Navigation buttons as the only visual interest, especially when they’re large
- Cluttered, not enough alignment of elements
- Lack of contrast (in color, text, to create hierarchy of information, etc.)
- Pages that look okay in one browser but not in another
Web design is not as easy as it looks. Many elements have to contribute and collaborate as a whole in order to produce a good and complete website. It is also easy to disregard few simple rules that can make or break a website. Users are always looking for a better experience, and their demands grow larger and harder to fulfill each year. User experience will affect how they regard and make decisions concerning the host or company website. In summary, web design is driven by user satisfaction and the benchmark keeps growing higher over time. Constant updating of interactivity, creativity, aesthetics and performance are essential in web design.
Below is a client asking for unrealistic demands from a web designer:
When a problem has occurred, a system alert users with an error message. Error messages can be presented as dialog boxes, in-place messages, notifications, or webpages. Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem.
Well-written, helpful error messages are vital to a quality user experience. Poorly written error messages result in low product satisfaction, and are a leading cause of avoidable technical support costs.
A typical Window’s error message.
2. Good and Bad Examples of Error Message Design
1. Bad Error Messages
A bad error message usually brings frustration because they interrupt the user’s current activity and demand to be acknowledged before allowing the user to continue. Sometimes, it also bring humour because it does not make any sense to anyone other than the first person who put it there. We will take a look at some poorly written error messages.
This could quite possibly be the best Windows Vista error to date, or in other words, the OS has problems reporting a problem.
Windows gets freaky. To delete something, the user needs some space and for that he has to delete something else.
Users learn that there was an error, but have no idea what the error was or what to do about it.
2. Good Error Messages
In contrast to the previous bad examples, good error messages have:
- A problem. States that a problem occurred.
- A cause. Explains why the problem occurred.
- A solution. Provides a solution so that users can fix the problem.
We will list some well-written error messages.
These 2 error messages above is clear, concise and very helpful in guiding users.
This 404 error message is quite creative and humorous. It also provide user enough information. (catalyst studios 404)
3. Error Message Design Guideline
According to Jacob Nielsen, these following points are the key points in error message design:
1. Explicit: error message must indicate that something has gone wrong.
2. Human-readable: error message must be written in human language, not some code or abbreviation.
3. Polite: error message must not blame users or imply that they are either stupid or doing something wrong. We really like the way Firefox presents its error message.
4. Precise: error message must describe of exact problems, rather than vague generalities.
5. Constructive advice: error message must guide user how to fix the problem.
6. Visible: error message must be highly noticeable, both in terms of the message itself and how it indicates.
7. Preserve: error message must preserve users’ work and reduce the work of correcting the error.
Moreover, we find out there are some more points which are quite relevant to the design:
1. User-centered: error message must describe the problem in terms of target user actions or goals, not in terms of what the code is unhappy with.
2. Rare: error message must displayed infrequently. Frequently displayed error messages are a sign of bad design.
3. Funny: use relative humour is good but make sure it does not over-shadow your message. (For example: retardzone 404)
Often the best error message is no error message. Many errors can be avoided through better design, and there are often better alternatives to error messages. It is usually better to prevent an error than to report one.
However, error message is a crucial and unavoidable part of any system. Therefore, error message has to be carefully design to bring the best user experience.
This is one of the best 404 error message that we have found. It shows how creative an error message can be. (bluedaniel 404)
“Everything one says about God is a metaphor.”
A metaphor is “a device” for seeing something in terms of something else.
It brings out the thisness of that or the thatness of a this.”
—Kenneth Burke, 1945
Let imagine if a 5 year-old kid asks you what internet is, how would we explain to him. We cannot simply read him the definition we get from Google. We will have to find a “metaphor” of internet to explain it to him, like the way we call a group of data is a file and a group files is a folder.
We will discuss below what internet metaphors are.
2. Internet Metaphor
a. What is Metaphor
Metaphor originates from the word “metaphora” which means to transfer, to carry over. We can understand it as the transference of the relation between one set of objects to another set for the purpose of brief explanation.
In interaction design, metaphors are everywhere, but the role of metaphor has often been misunderstood. Metaphor has been usually thought of as being limiting the idea and leading to faulty thinking about how products work. However, metaphor can be a powerful tool for designers, in both the process of designing and within the products themselves. Metaphor can help redefine design problems and help solve them. It can also provide cues to users how to understand new products by linking them to the products users used before.
b. What is Internet
According to Wordnet, internet is a computer network consisting of a worldwide network of computer networks that use the TCP/IP network protocols to facilitate data transmission and exchange.
According to The Oxford Dictionary of English, internet is a global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols.
c. Internet Metaphor
Internet metaphors came to exist for terminological reasons, i.e. they emerged due to the urgent need to give a name to things that did not exist previously. Metaphors can influence our views of the Internet, both providing us with possibilities and limiting other possibilities. “They can help people comprehend the new, the unseen, the unknown; but they can also mislead, sometimes deliberately, because the kinds of experience they purport to connect may be incommensurate.” (Wyatt, 2004)
Below, we will list out some internet metaphors we can find out.
1. Internet is like physical space. And sometimes it is called “cyberspace”.
Physical space metaphors included metaphors regarding transportation and physical structures. Each of these metaphors was rooted in a physical experience. People drive cars in slow lanes, so slow connections on the Internet get compared to slow lanes.
2. Internet is the information superhighway.
3. Internet is like the library. It has a ton of information and you can conveniently find out with simply a click. That is why we “browse” the internet.
4. Internet is an ocean. And it the reason we “surf ” the internet.
5. Internet is a web. HTML document is a book (webpage) and a collection of HTML documents is a place (website).
6. We like this metaphor the best. Internet is like oxygen. Although it is a joke, we believe most of us (not to say all of us) nowadays cannot live without the internet.
Metaphors are everywhere in interaction design. The desktop, like your desk, is where you keep your frequently accessed files, folders hold those files, so on and so forth. These are acceptable metaphors that are based on previously learned interactions.
We would like to highlight the fact that if internet metaphors have largely been motivated by the perception of internet users, there is also a reciprocal influence because Internet metaphors also structure our very perception of it.
Interface Design is a stage of product design that focuses on how the product looks and feels. Often the problems of look and feel are mistakenly thought to be the entire design problem. But look and feel is only successful if the other design issues have been carefully crafted first. Interface Design answers the question: “How does the product look and feel?” (Werby, O. (2008). Interfaces.com: Cognitive Tools for Product Designers. CreateSpace, USA)
2. Interface Design:
There are many different interface types.
We will give example of web design. Concern of web design is with how best to structure information at the interface to enable users to navigate and access it easily and quickly. Early websites were largely text-based and providing hyper-links. Nowadays, websites are more emphasis on making pages distinctive, striking, and pleasurable.
This is an example of good interface web design. This websites is based on flash. Although flash has some disadvantages like the need for plugins, long loading time, etc, it is still one of the best tools to create an interactive website. This website is about the third generation Toyota Prius. It allows user to “control” the car on the website. It is also aesthetically pleasing and neat, and is in accordance to the good design principles of proper affordance, visibility, feedback, consistency and constraints.
As from the example above, it can be seen that a good interface design needs to have good controls. The button controls are neatly laid in consistent pattern and locations. The controls are also in ideal positions so as to not obstruct the content from the user. Good controls improves the user experience and can improve real-time interactivity. Also this is an example of good navigatability, with relevant links and controls that do not force clutter, especially for website designs. Both good control and navigatability are crucial in determining a good interface design.
Below is an example of bad a website design according to the design principles. It is full of every bad thing you can think of – cheesy music, butterflies, seagulls, swans flapping all over the site, sparkly stars, growing flowers, a mad blue background and it’s absolutely smothered in crap images.
A bad interface design as shown in the example above, has bad control as the buttons are inconsistently scattered and unorganized (i.e. Index Page). They also obstruct content by being placed in the middle of the screen and in very large sizes, forcing to user to have to scroll the page just to view the content he wants. There is also bad navigatability from this, as the bad clutter confuses the user and makes navigation a hassle.
In order to have a good interaction design (in general) or interface design (in particular), we have to follow the Design Principles and Usability Goals.
Design Principles: Affordance, Visibility, Feedback, Consistency and Constraints.
Usability Goals: Effectiveness, Efficiency, Safety, Utility, Learnability and Memorability.
As per the earlier examples, aside from the visual design according to the design principles, good controls and navigatability are also as cruicial to the user experience. They should feel natural for the user according to the usability goals, and be effective, efficient, safe, relevant, easily learnable and memorable.