Affective Aspects of Interface Design

Affective aspects of interface design are aspects that are concerned with the way in which interactive systems cause people to respond in emotional ways.

The key to the success of an interface design is to invoke positive emotions from users and avoid negative ones at all costs. Positive emotions include motivation, learning, creativity and positive social and persuasive influences.

There are 2 methods that help to invoke positive emotions from users:

1. Expressive interfaces
2. Anthropomorphism

For expressive interfaces, designers make use of colours, animations, sounds and dynamic icons to give interfaces an appealing look and feel, which could create a sense of interactivity and feedback. However, when using these elements, special care has to be taken as they could affect users' emotions negatively instead when incorrectly chosen. Take colours for example, colours such as red, orange and yellow are attention grabbing, warm and cheerful. However, colours such as black, gray and blue could give users a cold, sad and unexcited feeling.

A well developed expressive interface can affect users' perception of the interface's usability. Users' are also likely to put up with less desirable aspects of an interface if the end result is appealing. This is due to 2 reasons:

1. Aesthetically pleasing objects appeal to users' sensually
2. Users' usually form an emotional connection with the object that appeals to them

Anthropomorphism is a technique in which inanimate objects are given human-like qualities. It serves to give users an enjoyable experience, reduce anxiety and enhances motivation. Research into anthropomorphism has shown that users have tend to have more positive feelings toward interfaces that give positive feedback to users.

One method of anthropomorphism is to use virtual characters. Virtual characters serve to give users a feeling of welcome and makes them feel involved. For example, students are much more willing to participate in online exercises where a virtual character gives them positive, encouraging feedback like "You have showed deep understanding on this topic. Good job!" than those which give negative or no feedback.

However, anthropomorphism also has it's limitations. Because it gives inanimate objects human-like qualities, these would inevitably result in negative feedback given to users. Most people do not wish to have characters on the screen shaking their heads at them as it makes them feel stupid or inferior.

References:

1. http://en.wikipedia.org/wiki/Interaction_design
2. http://undergraduate.csse.uwa.edu.au/units/CITS3201/LecturesPDF/Chapter_5_ID2e_slides.pdf

Creativity Support Tools

Support tools are computational tools that allow users quick and easy exploration of interactions which are domain specific. The goal of these tools are to provide users support in hypothesis formation, deeper insights, speedy generation of alternatives and better dissemination of results.

Below is a set of proposed user interface design principles that support rapid exploration and easy experimentation, which fall in line with the goal of support tools:

1. Support exploration
2. Support many different styles
3. Support collaboration
4. Support open interchange
5. Make it as simple as possible
6. Invent things that you would want to use yourself
7. Balance user suggestions with observation and participatory processes
8. Design for designers

For users with a creative side, creativity support tools use computers as a medium to promote creative designs and expressions. They allow users to evaluate these proposed designs and provide easy backtracking.

Creativity support tools generally fall under 4 categories:

1. Sketch-based interaction
2. Tangible user interface
3. Animation
4. Touch interface

The more interesting of these 4 are tangible user interfaces and touch interface. Tangible user interfaces (TUI) allow users to interact with digital information using their physical environment. An example of a TUI is the I/O Brush developed by MIT which allow users to make use of colours, textures and even movement of objects in everyday life to paint their own picture.

As you can see, the I/O Brush is a very simple tool that allows users with no knowledge to catch on to it quickly. In addition, it promotes exploration of the many different styles of painting and drawing. Most importantly of all, there is no limit as to what kind of texture, pattern or colour available for use as the brush is able to pick up anything you wish to use.

Touch interfaces have the ability to recognize the presence of multiple points of contact with the screen surface. This allows the implementation of advanced functions such as pinching/zooming and drawing. One such example of a touch interface is the sand canvas. A sand canvas enables users to create drawings that emulate the task of drawing on sand.

As shown in the video, users make use of many different kinds of hand movements (e.g. hand sweeps, fingertips, canvas pour etc) across the screen surface to create many different scenes. This is a much more interesting way of giving input as compared to simply using a mouse or stylus to draw since our hands are capable of coming up with a bigger variety of movements and textures than the usual input devices we have.

The future of creativity support tools is certainly a promising one. Just by looking at videos of these interesting interfaces makes one's creative juices flow. It certainly made mine flow.

References

1. http://www.oii.ox.ac.uk/events/?id=6
2. http://www.aipo.es/articulos/4/1.pdf

Computer speech recognition and voice-user interface

A voice-user interface (VUI) is an interface which enables a human to communicate with a computer through his voice (speech). Today this probably means giving simple instructions or/and going through a automated process through your phone. But why? The potential for communicating with your voice is huge! It is the way humans communicate with each other so why couldn't this be the way we communicate with computers and electronic devices as well?

Well, for a start the way a computer understands the speech is by analyzing the digitalized waveform into its frequency components. Then compares this spectrogram pattern to known patterns for particular sounds. This is a very complex thing to do with so many errors that can happend, for examples heavy accents will easily be misunderstood.

If Computer voice recognition became good enough (meaning even better than a keyboard) we will surely see a huge change in how different devices looks. Can you even imagine removing the keyboard and computer mouse? You probably can, since Apple already took a step in this direction with their iPad, thanks to the multi-touchscreen. Perfect voice recognition would take this process even further.

However, one of the latest progressions in this field is also something from apple, Siri, the new voice assistant in iPhone 4S. This is far from perfect, but still very useful in everyday life. Check out this video to see how it (she) works:

Even though computers and electronic devices eventually will understand perfectly what we say, it is only 7% of our communication that comes from what we actually say, the rest is body language and how we sound. But wouldn't it be a bit sad if our computers would understand our ironic shouts and angry gesture's towards them?

References:

http://www.voiceworks.co.za/
http://en.wikipedia.org/wiki/Voice_user_interface

Robotic Interface

Robotic interfaces now become popular more than ever are defined as a connection between a person and product. The most popular types of robotic interfaces range from the automated voice systems over telephones to actual robotic receptionists. One of the best thing about robotic interfaces is the fact that they help to get rid of amount of time usually spent by users therefore help saving budget.

Let's say nowadays, the speed of data collection has been growing faster and faster, a group of people searching for information would be more benificial if applying easily-used and friendly rebotic interface connect them and the experimental data sought after.

General research on HRI (Human-robot interaction) which covered this topic includes

• Methods for perceiving humans
• Methods for motion planning
• Cognitive models

There are actually a lot of applications of HRI such as in following popular fields

• Entertainment
• Education
• Field robotics
• Home and companion robotics
• Hospitality
• Rehabilitation and Elder Care

Reference:

http://www2.mse.vt.edu/inamm/RoboticInterface/tabid/864/Default.aspx

http://en.wikipedia.org/wiki/Human%E2%80%93robot_interaction

Project concept - Wedding planner interface

A wedding is a once in a lifetime event that people would want to make as memorable as they could. There are many intrinsic details that need to be attended to and it could be confusing and messy to get everything organized. Thus we believe that every couple would definitely need help with planning such a massive event, especially if they have no clue as to how to go about it.

Interface

We have decided to implement our interface as a web-based information system. This is due to several reasons:

1. Weddings are a one-time event so users are unlikely to be motivated to specially search for and download an app to help them plan their wedding.

2. People tend to search for information using the internet, where vast amounts of information can be found. In addition, the internet allows many windows to be open at the same time, enabling users to make comparisons between different planners.

3. Fast broadband connections and mobile devices enable users to receive information in a timely manner anytime, anywhere so that they can plan as and when they wish to.

Inspiration

Browsing through many wedding planner websites we noticed they had a few things in common:

1) Most websites follow a general format of grouping functions into categories under a menu bar

2) Many photos or images are used to attract the attention of users

3) Simple but user friendly interfaces

Examples:

Functionalities

We have identified the following tasks as common tasks that users would need to perform.

1. Budget Calculator

The budget is a huge part in every wedding and the (soon to be) husband and wife needs to make sure sufficient amounts of money is allocated to each portion of the wedding while keeping to the budget.

The budget calculator will be implemented in a table format that is similar to an excel spreadsheet. The leftmost column would be for the categories and objects the couple are intending to include in their wedding. The rightmost column will contain the amounts of money the couple is planning to/have spent on each object, with a total sum at the bottom so that users would know if they are still within budget.

Descriptions of each object (e.g. vendor name, quantity etc.) could also be keyed in for easy reference.

2. Schedule Planner

There is many intrinsic details that need to be attended to so that no important things may slip the users’ minds

The schedule planner will be done in a monthly calendar format so that users can see all the events they have in a given month at a glance. In addition, the calendar will come with big boxes so that each event and all its relevant details will be visible to the users without them having to manually click on each individual day just to see all the details.

Users can record down any appointments or important dates regarding their wedding (e.g. Food tasting, Photo shoot etc.) so that they do not forget any important events.

3. Wedding Gowns & Suits; Rings

It can be very time consuming to visit bridal shops one by one...

This functionality provides users with a huge database of bridal and jewellery shops, including items and dresses with all designs and colours you can imagine. 

When users click on a bridal shops’ name, they will be shown the designs and colours of the gowns and suits, as well as their prices, offered by that particular bridal shop. A similar concept is used for wedding rings. In this way, users will be able to shortlist a selection of  gowns and suits before they make a trip down to the respective bridal shops for fittings.

4. Wedding Photos

A wedding is not complete without wedding photos

Here you can browse different styles of photo shoots provided by different photographers.

This functionality provides users with different styles of photo shoots (e.g. overseas shoots, scenic shoots, retro shoots etc.) which they can choose from. When a style is chosen, a list of photographers that provide the desired style of photos will be given along with the rates they charge. It also allows users to contact/book appointments with the individual photographers to discuss details.

5. Useful Tips/FAQs

Best way to have a perfect wedding is to get information/help from couples who have planned their weddings successfully

Here we gather some things that users may not be familiar with and/or might need some suggestions or help with.

This function serves to give tips to users on how to improve or avoid while planning their weddings. Information would be separated into 2 large categories namely Bride and Groom, under which each user could find the relevant tips and information they may need.

Design

Menu Bar 

The menu will need a few major categories such as Bookings, Programs, Budgets etc. And all the above mentioned functionalities will be categorized under these headings. Small images will be used to represent each functionality instead of words (more attention grabbing)

Homepage

Our goal is to make it visually appealing to the users and pique the interest and encourage them to continue exploring the page and one way to do that is to show a short video of photos of previous couples at their weddings: Example or see our design below

General Design

We were very inspired by the apple website and its clean design. One main thing that we agreed on is to use large photos to grab users’ attention and with short descriptions below each photo to give users an idea of what they are looking at and what to expect. 

Clicking on each large photo will bring the user to a page with detailed descriptions of the category and smaller photos of each alternative in that category. Example:

After some feedback from the seminar we might also include adds in our design

Key Challenges

1. Getting photos/images

We believe this would be a problem as we intend to implement a photo gallery of couples at their wedding ceremonies and this may infringe copyright issues.

2. Designing/Programming

As none of us have had any experiences with designing such interfaces with Flash or any other software tools, it could be time consuming for us to figure our way around these software.

3. Usability (Testing on people and getting feedback)

Although we already have a good idea of what would be included in our interface, we cannot be sure that the final product would turn out exactly as we’d like it and thus affect the usability of our interface. In addition, we hope to be able to get people to test out our interface and obtain feedback to improve on it before the final submission but it could be difficult to find the suitable target group to try it out.

HCI – the next decade

"I think there is a world market for maybe five computers" said Thomas Watson (the chairman of IBM) back in 1943. This is a very good example on how hard it is for us to even imagine the future with all its possibilities. You have probably heard this before but technology is evolving really fast. Soon the only boundaries of what we can accomplish will be our own mindset of what is possible. Which of course in many ways is a good thing, but it makes it very hard to predict the distant future. Still we're boldly sticking our heads out of the train window, trying to figure out if the next turn is a left or a right, but the mist is getting thicker...

Here is a little prediction from Ericsson about how we will use and interact with computers in the future, they believe that more than 50 billion things, everything from cellphones to stuff in our home will be computers, connected to each other.

The movie shows, in a very clear way, how we might use the next decades technology and how it will improve our lives. If you don't believe this is possible very soon, just take a look at apples Iphone 5's new features:

References:

http://www.slideshare.net/chris_khalil/the-future-of-hci-intelligent-user-interfaces-as-agents-of-change

http://www.ericsson.com/thinkingahead

Interaction Devices

Interaction devices is a broad term used to cover a wide variety of devices which allows us to interact with the computer. They can be separated into 2 categories:

1. Input Devices
2. Output Devices

Today, I will focus on input devices, specifically pointing devices and how they have evolved with time.

What do Pointing Devices do?

Pointing devices have a specific set of tasks which allow users to directly manipulate items on the computer. These tasks include:

1. Selecting an item
2. Dragging and positioning an item
3. Orienting / rotating an item
4. Defining a path / curvature of an item
5. Text writing / editing

First known pointing devices

The first known pointing devices were those that required the movement of a physical object - a mouse or track ball.

Both of these devices are also known as indirect control devices as user interaction with the computer occur away from its screen surface.

Today's Mouse

With vast improvements in technology, people have left the old traditional mice and track balls behind and came up with optical mice.

Optical mice use light-emitting diode and photodiodes to detect movement and require little to no maintenance as compared to track ball mice as they do not possess any rolling parts which could become clogged with lint. Even optical mice themselves have gone through many changes since it was first introduced.

They evolved from the traditional wired mouse

to the wireless mouse that is more portable and convenient to bring around.

Other Pointing Devices of Today

Along with the invention of optical mice, many other pointing devices have also surfaced in the last decade. These devices include:

1. Joysticks
2. Stylus
3. Light pens
4. Touch screens

Joysticks are often preferred to a mouse when playing games due to their speed and accuracy. They also come in many different shapes and designs to suit the different needs, usages and preferences of users.

Direct Control Pointing Devices

Direct control pointing devices allow users to interact with a computer directly on its screen surface. The stylus, light pen and touch screen are all direct control devices as shown in the pictures below.

The stylus is commonly used together with small screens such as smart phones and PDAs as it usually comes with a sharp tip that allow users to point at specific small items on the screen.

The light pen is more commonly used when interacting with large screens as they tend to have larger and flatter tips than the stylus.

Lastly, the touch screen which has been becoming increasingly popular in recent years, is a devices that creates movement by tracing the paths of a finger on the computer screen. Many handheld devices in the market today are based on touch screen technology. These devices include popular Apple products such as the iPod touch and iPhone, and many other smart phones as well.

References:

1. http://www.tech-faq.com/pointing-devices.html
2. http://www.doc.ic.ac.uk/~frk/frank/da/hci/Input%20and%20Output%20Interaction%20Devices.pdf