Describe key principles of interactive design

Interaction design involves creating usable and useful products and services for users. The user is at the heart of the process, with a lot of focus on what tasks, goals, needs and experience the user needs when using a product. Whereas UX design involves how a user interacts with the aesthetics of a product, interaction design is concerned with the actual interaction between the user and the computer.
There are a number of key principles in interactive design, some of these are:

Affordances

Affordances involve making the design speak for itself, so users can easily navigate through the design and find what they're looking for. This can be as simple as making all buttons look consistent and clear about their purpose, otherwise users could get lost and not know what to click on.

Goal-driven design

User research isn't really involved in user interaction design, but the results of this will help make sure that the design is centred around what the user needs, and help them get there. For example, if you run a florist website then chances are people are going to want to view the range of your flowers, so make the link to this clear and easy to find, otherwise the user will leave discontent that they didn't find what they were looking for.

Learnability

A successful interface is mainly one that can be easily navigated. and more often than not users interact better with patterns they know and understand. Similar design patterns help users navigate a site easier and quicker than if they have to think hard about what they're doing. For example, the usual convention after filling out a form on a website is to click the 'submit' or 'next' button, replacing this with a small link saying 'take me to the next page' would be unfamiliar to the user and make them feel on edge about if they're doing the right thing.

Explain how sound, animation and other devices can be used to five users feedback on their interactions

Sometimes, users need confirmation that the action they just performed has been processed by the system and the technology is currently loading. This could be shown by a 'please wait' or 'loading' screen, but sometimes just having a simple chime once the user has clicked a button shows that the action has been successful. For example, when you send an email on outlook it makes a 'whoosh' noise to show that the email was successful.
Another way to portray an application loading could be an animated spinner. Sometimes if an application just stays static then the user doesn't know if they action has been tracked, so they'll do it again and again with the risk of the application tracking.

Factors that could  affect test results

While doing the testing process on Panton Glass I found that there were a number of factors that could affect the results of the user testing we were conducting. 

Some of these were things such as:

Age

Is the age of the user we are testing on right for the audience of the product we are producing? Such as, you would not want to test something aimed at children on middle aged people, as they are going to have different tastes and wants as the target users.

Environment

Another was the environment we were testing in, such as if you were testing something fitness related in a fast food restaurant, the audience may not be correct as they would never use the product you are testing for.

Number of participants

The number of people you are testing on can make a big difference, as the more people you test on means the more varied results and opinions on your product as you would originally. This ensures that you are addressing as much of your design as possible and really smoothing out the the problems.

Useful tools for website development

Web development tools allow web developers to test and debug their code. Most modern browsers have web development tools already installed, such as Opera Firefly and Google Chrome’s web development tools. These tools do not assist in the actual construction of the web page, but rather help web developers test their code on the interface output.

It’s mostly used for developers to test their code on the output interface, so they can view any bugs in the code and try to fix them in a live environment.

This is useful because if you start to make subtle changes in your actual code, you would have to constantly update your files and possibly continuously commit your changes to a server. Doing this in a live environment means you can do it all at once and paste your changes into your code, whilst also checking it works in the process

Here are a few different tools and techniques used in website development:

XHTML

XHTML is a markup language written in XML, and as the name suggests is a mix between HTML and XML which is primarily used for Net device displays.

XHTML helps developers parse and process a website for easier manipulation of the data. This expands the functionality for developers who are looking to target specific tags or sections of the data due to the cleaner framework and layout. This helps you tailor the website to your needs as a developer for easier editing and changes.

CSS

CSS is used to style elements in a webpage, it doesn’t create elements itself like HTML does, but rather changes the position and style of elements instead.

You can standardise the overall style of a website using CSS by adding classes to multiple elements or just using single ID’s if you wish to be more specific.

For example, if you give every title in a webpage a class called ‘title’ in the HTML, and make the colour of that class in the CSS pink, then it will automatically make everything that has that class in the HTML pink.

The advantages and disadvantages in website development

Methodologies

At my workplace we use agile methodologies in our projects, which involves developing and releasing the product as early as possible and then constantly updating it with newer functionality as the requirements change.

Though I would much rather use waterfall methodologies as I find it easier to work from specified requirements, get all the work finalised and finished and then produce it to the client for sign off and verification.

Prepare and Use Mark-up in Interactive Media Products

Prepare and Use Mark-up in Interactive Media Products

In this blog post I will cover a range of different types or markup in interactive media products. This includes the key principles of semantic mark-up, which involves; progressive enhancement, graceful degradation and web standards, I will explain the differences between development, staging and live web servers and I will also analyse the origins and likely future developments of mark-up language.

Key principles of...

1. Semantic mark-up

Semantic HTML means using mark-up on a webpage that is easy to use in accordance with screen readers and other accessibility tools. When making a web page you have the option of creating the page using 'divs', though this way is speedy and easy for the developer, it is not very efficient of accessibility tools like semantic mark-up can be. 

The key principles involve:

• Simple mark-up that is easy to read by screen readers and other accessibility tools
• Helps with search engine optimisation, such as: H1, body etc. 
• Makes it easier for Googles indexing engine to understand the website

1. Progressive enhancement

Progressive enhancement involves building the foundation of a web page first before anything else, and then building on it with layers such as images and styling. This ensures that even if a page isn't completely finished, it's structure and content is still displayed on any browser and device. Once this has been secured, you can then start styling and editing the page to how you want it to look.

1. Graceful degradation

This is when developers and designers target newer browsers with the best design and functionality, but leave older browsers with a functional yet not as optimised webpage. It works like progressive enhancement but the opposite way round, so the best features are for the newer browsers and older browsers are prioritised to just content and basic functionality.

1. Web standards

Web standards are what is considered to be the correct semantic standardised markup for a website, this is usually regarded as the best practice for web design. The most commonly used standards are W3C (World Wide Web Consortium), who have both a HTML markup checker and CSS validator service available free online.

Differences between development, staging and live web servers

Development Server

This is the server where developers can create the prototype and beginnings of a product while it is in the early stages. This is before the client gets to see the product, and the developer can test and experiment with different tools and methods of the building process.

Staging Server

This is when the initial development has been done, and the website is ready to be tested and fine tuned for problems or glitches. The client could be shown this as a prototype or guide to how the website is coming along, though also be made aware that there are still bugs and more work needs to be done.

Live Server

Once the website is finished, it is pushed on to the live server that can be accessed through the internet via URL. This is when the testing of the website is completed and ready for distribution to the client, so they can access it themselves and see the result.

Origins and likely future developments of a mark-up language

Origins

The origins of the HyperText Markup language was in 1991, where Sir Tim Bernerds-Lee wrote a document called 'HTML tags', where he proposed around two dozen elements that could be used for writing web pages. 

Though he came up with the idea of these elements, the use of angle brackets as tags already existed in the earlier ideation origin of HTML, SGML(Standard Generalised Markup language). Instead of creating a while new structure and markup, Sir Tim decided to build on top of what SGML had already started previously. And that is where what we now know as HTML5 today originated from.

Future Development

Though HTML5 has already been released and started to be used by developers and designers, there is still a problem with browsers supporting a lot of it's features, so in the future an improvement on the current markup would be cross browser support and optimisation. 

Lesson Learnt in User Testing

After the first draft of mobile designs for the Panton Glass website, we tested the paper prototypes on users around the workplace to see how they interacted with the layout and content. 

During this process we found that the users we chose in house were not the ideal audience for which we should have been testing on. We should ideally have gone out of house, because we were testing on users working in a software development company and as a result will be bias towards the technology involved rather than the design. 

Next time I need users to test a design on I will go out of house to a public space e.g. a shopping center, so to aim for the audience that the website will ideally be targeting.