MMc404 'Stimulating the senses'

Stimulating the senses

As part of multimedia FDY1, I have been given a brief to research, propose and present an interactive multimedia artefact for a disabled target audience. I will begin by researching deep into interactive media, current and future uses and best industry concepts and practices. 

Interactive media applications; 'Interactive media is a method of communication in which the out-put of media depends on the input of information from users and refers to products and services on digital computer based systems. which respond to the users actions by presenting content such as video, audio, and animation'. 
https://en.wikipedia.org/wiki/Interactive_media


In order to design and produce a working simulation of an interesting and easy to use interactive application, I am going to have to research into current uses of interactive media, future development and current practices and design concepts for interactive media applications.
Current uses of interactive media;

Interactive media is used every day, it is all around us, we use it when we are playing games on our phone, when we are talking to our friends on Facebook and even when we are traveling we use a maps application to make sure we don't get lost, these are just a few examples of current uses.
 Recently there have been some breakthroughs in interactive media, a next generation virtual reality game has been invented called Oculus rift, the user wears a headset and with its state of the art  advanced display technology the user can experience the sensation of presence. The user can experience anything and it is still unknown the potential this technology actually has. Soon to be released in 2016, the Oculus Rift will be the first Virtually reality technology available to the public.  

Augmented reality is another example of current interactive media. 'It is a live, direct or indirect view of physical, real-world environment' in other words it can distort reality taking a 3D image or video and overlaying in real time using the camera on a smart phone or tablet. Google sky Is a good example of this, by using a camera, and simply pointing your device towards the sky googlesky can identify pretty much anything in the night sky, from stars and different constellations to planets, google sky does this all in real time and allows users to search for and find specific stars and planets not on screen, by directly guiding you with a directional compass, which means you can literally explore space.  recently this app has been involved in a conspiracy, surrounding the recent discovery of a possible new planet, someone using the app spotted a strange looking constellation of objects and after looking closer, they discoverd that the formation could in fact be another planet. This discovery speaks for its self and the app itself could change the way astronomers explore the skys. 



Spotcrime is an application that was recently voted to be among the best augmented reality applications. It gives users information about crimes in areas around them, using real-time crime information and alerts, users can gather information on any location in the united kingdom, united states and parts of Canada. The app pin points your location via GPS and uses crime information from the police, news and local media to pinpoint each crime, what time, and where it occurred. This is just another great example of current uses and how interactive media applications can help keep us safe.

Companies are taking online shopping to a whole new level by using augmented reality shopping catalogues .Companies like ikea have created an application that lets customers see what different specific pieces of furniture look like in their home, applications like this have truly changed the world of online shopping. 

Recently augmented reality is breaking into retail by introducing an new way of testing visual merchandising. with an app called 'Augment' or 'snapshot Showroom' the user can potentially visualise nearly any 3d model. users can create and upload their own 3d models and see them in a virtual environment using the camera on a smart device. 

(car finder)

This application (right) has been created to help people find their car, its solved a problem many people have when out shopping or out doing daily chores, it tracks your car, so wherever you are you won't forget where you've parked.

"We’ve all done it before — you finish up your grocery shopping and head out into the parking lot to make your way home, but unfortunately have no idea where you parked. Fortunately, Augmented Car Finder is an app specifically designed to help guide you to your hiding vehicle. Once the car’s location is set, the app creates a visible marker showing the car, the distance you are from it, and the direction you should walk to find it. We’ve found that it’s most useful for places like stadiums, convention centers, outdoor concert venues, and other crowded areas or those lined with massive parking lots. Users can also utilise the app to find their seats in large theaters and concert halls. The freemium version of the software should suffice for most users, but the premium version thereof does remove the ads and include additional tools for marking your favorite parking spot or specifying the arrow colour."

http://www.digitaltrends.com/android/best-augmented-reality-apps/2/

Augmented reality browsers

The technology of the future has arrived, augmented reality browsers have changed the way we live our lives, weekend trips that would take days to plan can now be planned instantly depending on how spontainious you are.

 "Apps that do it all are often a double-edged sword when it comes to mobile software. Sure, they may be able to get the job done, but they often do so rather poorly. Acrossair Augmented Reality Browser doesn’t suffer from the same crippling limitations as its peers though, providing a robust means of viewing the quickest route to the nearby cinema, hotel, restaurant, bar, or other similar establishment. Users can also check out geotagged Wikipedia entrees on historical landmarks, view local tweets in real-time, or even pin their respective car location for later. Whereas holding your camera upright akin to similarly-equipped browsers will bring hovering balloons to which you can follow, holding the device horizontally will showcase your location on a map and present you with a list of available layers from which you can chose to navigate. It’s a worthy alternative to the aforementioned Wikitude World Browser, one allowing photo access to Flickr and Panaromia, and equipped with a slew of sharing options."

http://www.digitaltrends.com/android/best-augmented-reality-apps/2/

-(yelp)

Augmented reality games 

Augmented reality meets gamers, you can now have hours of fun playing games like augmented reality basketball on your smart phone or tablet. Those long hall flights aren't looking so boring after all, this new generation of smart device games changes the dimensions of gaming on your phone, we've come along way since snake..

 "It may not include the overwhelming smell of hot asphalt or a new pair of Air Jordans, but AR Basketball does offer something the full-court experience cannot: convenience. Once users print the app’s accompanying marker from the developer’s support site, they merely need to launch the application and point the camera on their iOS device at the pixelated image on the paper. Once done, a virtual basketball hoop will appear on the display, allowing players to shoot hoops and rack up points using on-screen swipe gestures or a sliding meter housed on the right-hand side of the screen. The game additionally supports three game modes (Classic, Arcade, and Action), as well as a global leaderboard, autosave functionality, and seamless integration with popular social networks like Facebook and Twitter. However, with a occasionally-unresponsive controls and a hoop that’s not entirely visible at all times, it’s safe to say ARBasketball may require more practice than your average pickup league. It’s a good thing you can play at work, then".

 http://www.digitaltrends.com/android/best-augmented-reality-apps/3/#ixzz3tkSxMs8q 

"The developers of AR Invaders have little trouble flaunting their “International Mobile Gaming Award” for the Best Real World Game, or their app’s recent inclusion as part of the iTunes Store’s New & Noteworthy section (and rightly so). The freemium app pits players in an intergalactic battle against invading alien spacecraft as part of Earth’s Resistance Forces, ushering them to shoot down incoming ships visible within their iPhone or iPad’s display. The gameplay remains the same whether fighting in 180 or 360-degree mode, with each of the game’s nine impending invasions steadily increasing in difficulty as the game goes on — i.e. the UFO size decreases as the count and speed increases. Players will unlock additional weapons as they trudge through the game’s main campaign, either solo or together via Bluetooth, while shooting down enemy combatants in real-world environments viewable through their camera lens. It may not be Dead Space, but it’s no Space Invaders either".

http://www.digitaltrends.com/android/best-augmented-reality-apps/4/#ixzz3tkRuBZZt 

Future development of interactive media; 

Referring back to virtual reality and the occulus rift headset, and how it could potentially change the future of interactive media, this technology could potentially be developed into the world of social networking, bringing in a new era of virtual social networking, where user can interact virtually with each other on a virtual facebook experience. Users could create avatars and walk round a virtual facebook while chatting and uploading images. Thats just an example of how interactive media could potentially be developed into the future. 



Practices, Concepts and implementations for interactive media
Theory and Implementations for user interface design; 

While researching UI  design concepts I came across a very informative website called usability.gov, I found lots of information and in-depth analysis of UI design concepts, Its a great resource for finding out about best industry practices and various UX disciplines. The site provides an insight into user interface design process. 

"User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture".

"Interaction design focuses on creating engaging interfaces with well thought out behavior. Understanding how users and technology communicate with each other is fundamental to this field. With this understanding, you can anticipate how someone might interact with the system, fix problems early, as well as invent new ways of doing things". 

"Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colours, fonts, and other elements.  A successful visual design does not take away from the content on the page or function.  Instead, it enhances it by engaging users and helping to build trust and interest in the brand".

"Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way.  The goal is to help users find information and complete tasks.  To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system".
http://www.usability.gov/what-and-why/user-interface-design.html

Choosing interface Elements
Interface elements include;

• Input controls-Buttons, checkboxes, dropdown lists
• navigation components, search, tags, icons
• informative components, messages, progress bar

"Users have become familiar with interface elements acting in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction".

http://www.usability.gov/what-and-why/user-interface-design.html

Design Concepts 

http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255

'Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies.  Once you know about your user, make sure to consider the following when designing your interface':

• 'Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging'.
• 'Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly.  It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site'. 
• 'Be purposeful in page layout.  Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability'.
• 'Strategically use colour and texture. You can direct attention toward or redirect attention away from items using colour, light, contrast, and texture to your advantage'.
• 'Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scan-ability, legibility and readability'.
• 'Make sure that the system communicates what’s happening.  Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user'. 
• 'Think about the defaults. By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user.  This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out'.

http://www.usability.gov/what-and-why/user-interface-design.html

http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html

While researching on 'Dribbble' for different design concepts I found a variety of different innovative concepts, taking a look at them has inspired me to implement something just as creative in my own work. The creative concepts in an interface can be what draws the user in, from experience using something different that also works well can be what separates your design from other interactive applications with the same target audience.

                                                 

                                                              The 'fold to unlock' ios style:

                      

     The on/off switch for IOS

                                                                          


  Progression bar




Looking at interface design;


Im going to analyze an interface design, I will be using snapchat, as it was created for a similar project at Standford university in north america, it is quite similar to my idea so i have researched into how it was designed.

"Users can take photos, record videos, add text and drawings, and send them to a controlled list of recipients. These sent photographs and videos are known as "Snaps". Users set a time limit for how long recipients can view their Snaps". https://en.wikipedia.org/wiki/Snapchat

Snapchat uses flat design concepts and simple elements that utalises clean, crisp illustrations and type which makes the interface system easy to use, the logo evokes humor within the user and encourages you to use the app in a comedic way, after all it is essentially the same concept as Instagram. Users communicate via picture messages or videos rather than written word. The images or videos that are sent from app to app are not actually stored as a digital image, images 'selfdistuct' after 5-10 seconds, which in my opinion is why the app has been so successful, users are able to send whatever they want to a controlled list of recipients without worrying where the image will end up. 



According to snapchat in may 2015 the apps users were sending up to 2 billion images a day and in November the number reached 6 billion, the company now has an estimated net worth of over $20 billion u.s dollars.







'Snapchat was started by Reggie Brown and Evan Spiegel as a project for one of Spiegel's classes at Stanford University, where Spiegel was a product design major. Beginning under the name "Picaboo," the two later brought Murphy into the project to code the application. When Spiegel floated the idea in April 2011 in front of the product design class for his final project, classmates balked at the idea of the impermanent photos'.






Design theory

Minimalism:
wikipedia describes minimalism as; 
'a style that uses pared-down design elements, it derives from the reductive aspects of Modernism and is often interpreted as a reaction against Abstract expressionism and a bridge to Post-minimal art'.

Minimalism incorporates; 

• white space
•  clean sharp colours
• large contrasts 
• typography
• simple layouts
•  clarity of content

and until recently was considered boring and lazy, where as today it has shown that when used right it can lead to an excellent and emotional user experience.  

Good or bad?; In my opinion minimalism is new and exciting, its cool, the information Is there and is easy to understand and Considering how far technology has come in the last 20 years,  its easy to see how some older people are being left in the dark when it comes to understanding new apps and devices. Minimalism keeps things simple for people that do get left in the dark. 

Flat design;  

Wikipedia defines flat design as;
a style of interface design without any stylistic elements that give the illusion of three dimensions and is focused on a minimalist use of simple elements, typography and flat colours. Recently flat design has grown dramatically all over the web, and it continues to expand in popularity. It's not just a trend..Flat design is similar and can be related to minimalism, but can handle much more complexity, it embraces the limitations of a screen, rather than trying to hide them and makes User interfaces faster and easier to use. 

'Flat design not only reconciles the goals of minimalism and skeuomorphism, it also is uniquely adaptable to usability considerations. By shedding unnecessary styling, it makes for speedier pages, cleaner code, and easy adaptability. It also lends itself beautifully to every type of application; whether viewed on a desktop or a mobile screen, flat design is always legible and adaptable'.

http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant

Good or bad?; flat design is definitely my favorite style out of interface layout, simple and straight to the point and at the same time incredibly interesting,  its contrast of colours draws the eye and its intricate shapes makes you want to explore deeper. 

                                                        Skeuomorphism;

'is the practice of incorporating the look of an object that was made in another material into a design'.

Skeuomorphism is ment to provoke familiarity with objects within new UI designs, the principle of imitation is all around us, plastic knife and forks and plastic chairs that duplicates the shape of the actual original objects are great examples of how skeuomorphism relates to the real world. In the digital world it is often associated with apple designs. 

'While there's something to be said for the philosophy of skeuomorphism, there are a lot of issues that come with using it in digital design. For example, the analog clock featured in Apple's dashboard is harder to read than its digital alternative, and it's much more time-consuming to click the buttons on the calculator then it is to simply key them in'.
http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant

Good or bad?; I definitely would give this one a miss, UX is at risk with skeuomorphism, as well as taking far to long to design and for what pay off? It looks fresh and clean but from my point of view thats the only benefit, apple went wrong with Skeuomorphism..



UI/UX styles and techniques for disabled users

When designing a users interface it is important to think of the divers set of users who will be interacting with what you're designing, I.E; people that have difficulty distinguishing some colours this includes people that are colour blind(1 in 12 men/1-200 women) for example you should only use colour to complement something that is already visible.  

For someone that are colour blind it would be impossible to understand what is missing from these mandatory fields, other than the indication of the triangle with an exclamation in. 






Using high contrast between back ground and text will help anyone with with low vision, it is also been proven to help people that are dyslexic. 

                                                                Example


Accsessibllitly is important, it enables people with disabilities to perceive, understand and interact with interfaces.

"Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design. These design constraints will give you new ideas to explore that will lead to better products for all of your users."

https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.61tvrm4z4

Graphic design

 As I move forward with my research and as the brief requires I am now going to focus on graphic design, in an effort to understand the world of design better I am going to research into; current trends, the psychology behind typography and colour theory. 


Current styles in graphics design: 

The International Typographic Style, also known as the Swiss Style

Wikipedia defines this as; 'a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness, readability and objectivity'. The style is easily identified by asymetric layouts, use of grids and the preference of photography in place of illustrations.

Bauhaus

'Bauhaus, was an art school in Germany that combined crafts and the fine arts, and was famous for the approach to design that it publicised and taught. It operated from 1919 to 1933'. During this period it operated in 3 different cities in germany Weimar from 1919 to 1925, dessau from 1925 to 1932 and then finally Berlin from 1932 to 1933 when the school was closed by its own decision under director Ludwig Mies van der Rohe, over pressure from the Nazi government. 
The bauhaus style incorporates, the three primary colours red, blue and yellow which brings a primitive theme to most designs as well as using basic patterns and shapes like triangles, squares and circles combined, which turns designs into intricate pieces of contemporary art. Bauhaus designs are commonly known for balance, contrast of vivid colours and use of grids.


Recent trends;  

"Geo Wires";

Geo wires are a favorite when it comes to logo design. Geo wires come from interior design trends, and have recently been introduced to the world of graphic design, used a lot more commonly in Scandinavian design at the moment. The simple wire structures stand out and makes it seem like you are looking at an architectural blueprint.  

"Motion Lines"; are the lines behind an illustration that show motion, they appear to show motion by indicating which way the object is moving, the lines appear parallel to its direction of movement. 

"Trans Menagerie"; Is a way of using overlapping shapes to create flat designs with the end result giving a geometric kind of look, these designs are most commonly used to create animals. The transparency of layers represents the transparency of process.

"Letter Stacks"; 
this style of arranging type is used to create a user bond with a brand, it focuses not on the font, but on the mannor in which the letters are arranged, this trend is used most commonly on posters, logos and t-shirt designs.  

"Hand Type"; 
 has migrated from the printed page world to the illustration world. It is type that is hand drawn, and is used in logo design to create user familiarity with a brand and is a very popular typographical concept used in the creative industry which keeps graphic design and art connected.

I will combine my research of old and new trends and incorporate them into my thought precess when designing my interface logo however, I am going to continue further and research into Typography and the psychology behind typography;

'Typography is the art, craft and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques. The arrangement of type is the selection of typefaces, point size, tracking (the space between all characters used), kerning (the space between two specific characters), and leading (line spacing')'.

In an effort to understand more about typography and the psychology behind it, I looked up a ted talks on typography and tecnhology by John Maeda ; https://www.youtube.com/watch?v=WAuDCOl9qrk

Emotion in Typography, 

'Words that are given visual form then also become images well as continue to carry verbal meaning this dual nature of typography  is a powerful force for communication. Within a single letter form, word or phrase exists the potential to simultaneously convey a clear message along with symbolic or emotional messages that usually enrich each other . in this exploration of typography, the discussion of how type works focuses on the integral mechanics of the letters themselves, building on that fundamental understanding of type's funcional aspects, the discussion turns to transcending mechanics to build communication of great power-transforming words into images and intergrtatig them with overall visual experience.'  

- taken from the 'typography workbook'-'a real world guide to using type in graphic design'.

I have found an article online which demonstrates the abilities of typography and clearly describes why it is so diverse;

'For my demonstration of the incredible abilities of typography, I’ve chosen to use the word “loud” — it’s a simple word, four letters, with a pretty universally understood meaning of producing or being capable of producing a whole lot of noise. Generally, it is used negatively. The construction is too loud, the traffic is too loud, my neighbor’s experimental electronic rap music is too loud. No matter whether you type it in a different font or use lots or very little kerning, it still means the same thing. Typography doesn’t change the actual meaning of a word, but watch how your perception of the word changes. It’s uncanny, really. You can know what it means, and still feel like it means something different, even without the addition of any other words or images.

For example, in a large, bold type, the word loud looks loud. This probably is along the lines of how you visualize the word when someone says it. (We’re assuming here that you’re a person who regularly visualizes words. If not, try it! It’s fun!)



Conversely, in a small, tracked-out font, the word loud looks spacious and free. It’s the loud sound of something small, like a pin falling in a silent room.





In a classic script, loud is the big, beautiful, encompassing sound of a classical symphony.



In a retro display font, loud is the cool new club (I totally stole this club idea from Maeda, just FYI). Let’s go to loud, it’s where all the hip kids hang out.



In a bubbly, childish hand-lettered style font, loud is a daycare full of laughing children. Loud is playful. Loud is happy.



And finally, in a lightly tracked sans-serif, loud is the newest product from Apple. Everyone’s lining up for loud. Coming Spring 2014.



This exercise to me clearly demonstrates why typography is of such importance in graphic design. The wrong choice of font can completely skew the message a designer is trying to send. Everyone’s seen an advertisement or a logo at least once in his or her life that just doesn’t seem to make sense with the company or what’s being sold. The type is too feminine for such a masculine product, or too traditional for something claiming to be modern, or too contemporary and cool for something rooted in history. The power of typography should be used wisely, and certainly never taken for granted.'

http://blog.fidmdigitalarts.com/blog/the-power-of-typography/

Colour Theory;
 'In the visual arts, colour theory is a body of practical guidance to colour mixing and the visual effects of a specific colour combination.'
https://en.wikipedia.org/wiki/Color_theory

The colour wheel, is a circle of colour based on reds yellows and blues, sir Isaac newton developed the first colour wheel in 1666, and since then scientists have been studying and designing different variations of the concept. 



The categorires of colours in the wheel;

Primary Colours: Red, yellow and blue, primary colours are the 3 pigment colours that can not be mixed by any combination of other colours. All other colours are derived from these 3 primary colours.

Secondary Colors: Green, orange and purple
These are colours formed by mixing primary colours.

Tertiary Colors: Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green
These are colours formed by mixing a primary and a secondary colour.

Colour Effect 

Some colours relate to mind body and emotions and the balance between these;
Red is seen as a powerful, aggressive colour, it has the property of appearing nearer than it is therefore it grabs the attention first making it more dominant, hence its use and effectiveness in traffic lights.

Blue; is an interllectual colour it represents trust, serenety and calm. it is the colour of the mind and is therefor soothing light blues are calming and aid concentration, it is the colour of clear comunication hence its use by facebook. 

Yellow; is an emotionally stimulating colour it is bright and positive, it is the colour of the sun and the sun represents life, it is also the colour of confidence and optimism. 


Green; represents balance which is a more important concept than people think, it is the colour of nature and is calming, green is also  the indication of water and it gives you a primitive feeling associated with nature. 


Colour complementarity is complex. Basically, it means that if you mix two colors from the opposite side of the color wheel, you will get a neutral gray. And most importantly, when you juxtapose two complementary colours, you get an afterimage effect.














PRODUCTION CASE STUDY
After researching into design theory and concepts for interactive media applications, I will now start to generate ideas and begin the process of developing and designing my own interactive interface as required by the brief.


Ideas generation 
Generation of ideas is a crutial part of design, to meet the criteria of the brief  I believe you must first assess the situation and  brain storm,  get all your ideas on to paper,  only then can you begin to start the process of seperating the good ideas form the bad, it all starts with critical thinking. 


My first initial thoughts when given the brief were to try and create something that was actually needed, there are so many apps out there that I thought how can I possibly contribute when everything has been done already so many times before. So I decided to try and think of something that to the best of my knowlage, hadn't been done before and would actually help the able bodied disabled, as required by the breif. These are my first initial brainstorms;

I came up with an idea to create an UI that used augmented reality, to allow deaf people to go on the robin hood tours of Nottingham and understand what was being said during the tours. The idea being that whatever was being said by the tour guide is then translated into sign language using augmented reality on a smart device.  

 After brainstorming my ideas and possible options, I realised that it may have been a good idea at first, but it was something that didn't interest me, and given the flexablility of the brief i decided to change my final idea to something that was more fun and exciting as I would potentially be dedicating a lot of my own time and effort into designing something, I may as well create something that I find interesting.
Which is when I came up with the idea of an interface that uses augmented reality to edit a photo that has just been taken to make it appear as tho there is a celebrity actually in it, for example the user would take a selfie and it would appear as tho a celebrity (of choice) is there with the person.








Final idea brainstorms;

[Celeb-drop/Dropper]













I then repeated my ideas generation process;




















































After deciding on a name for my interface I then began preliminary logo sketches, first starting with neutral soft colours such as light green and blue and exploration of a bauhaus theme; 

After deciding on a colour system and logo with the help of my research, I began to work on illustrating the logo using adobe software;

Logo #1

Logo #2

Logo #3

After deciding on a final logo design, I then created wireframes to give an initial idea of what the interface would look and feel like;