MMc404 – Interactive Multimedia Applications ( Augmented Reality App )

What's Augmented Reality?

The process of superimposing digitally rendered images onto our real-world surroundings, giving a sense of an illusion or virtual reality. Recent developments have made this technology accessible using a smartphone.

How is it used?

Augmented reality is hidden content, most commonly hidden behind marker images, that can be included in printed and film media, as long as the marker is displayed for a suitable length of time, in a steady position for an application to identify and analyze it. Depending on the content, the marker may have to remain visible.

It is used more recently by advertisers where it popular to create a 3D render of a product, such as a car, or football boot, and trigger this as an overlay to a marker. This allows the consumer to see a 360 degree image (more or less, sometimes the base of the item can be tricky to view) of the product. Depending on the quality of the augmentation, this can go as far as indicating the approximate size of the item, and allow the consumer to 'wear' the item, as viewed through their phone.

How does it work?

Using a mobile application, a mobile phone's camera identifies and interprets a marker, often a black and white bar code image. The software analyses the marker and creates a virtual image overlay on the mobile phone's screen, tied to the position of the camera. This means the app works with the camera to interpret the angles and distance the mobile phone is away from the marker.

Due to the number of calculations a phone must do to render the image or model over the marker, often only smartphones are capable of supporting augmented reality with any success. Phones need a camera, and if the data for the AR is not stored within the app, a good 3G Internet connection.

Analyzing some AR Apps

Wikitude World Browser 

This AR App allows the user to find some City attractions, locations and more. by having the camera work as a search engine for some of the locations to go to, Food, Cinemas, Bars and more. Its UI you can see is reality easy to use and access, just tap at what you would like to do. and then it can show you these places using a geographical locations as well as some reviews for the place too.

Yelp Monocle 

This is similar to the App above but it will give you locations also on a map view as well as locations of your friends or family that recently went to the attraction or location so you can easily meet up or find each other.The convenient app uses your smartphone’s GPS and compass to display AR markers for nearby restaurants, bars, and other businesses in real time, each bundled with the service’s user-generated ratings and reviews. 

SnapShot Showroom

Basically this app allows you to take a picture of the desired room to furnish with the space that the product will go. So it allows you to see how the product you wish to buy will fit into the room without having you to buy it first or imagine how it will fit there. it saves also of time an trouble for the customer.

Augmented Car Finder

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.

Google SkyMap

To use this App all you have to do is, just point your phone upward when it’s reasonably dark and clear outside, and Google will point out all the different stars, constellations, and planets that are visible to your phone’s camera. IT also allows users to search for specific stars and planets not presently visible on your screen. Once found, the on-screen interface and directional compass will then directly guide you to said star or planet

Augment

Augment is an app specially designed to boost sales, bring print to life, and visually see the possibilities at hand. Once users sign up with a free Augment Manager account, the app allows users to upload their own 3D images and trackers from applications such as Cinema 4D, Sketchup, Maya, and the like, and place the 3D models in a virtual environment using the camera on their iOS device.

APP UI and Design

Whats Popular right now for Apps is to have a flat design and UI, this is because its clean and easier to see whats where on the App.

This Apps main color scheme is simple, and consists of 3-5 colors mainly, it is flat as that is the popular design to go for right now. its simplistic and spacious with its content as well as has a simple typeface.

Color Blindness and how it affects you

People who are color blind have a limited Hue to work with and see, thus they have trouble looking at websites, apps and games. they only see a certain amount of color and can be hard for them to distinguish certain things and colors.

A Website that is making a change for Color blindness to educate the rest of the world of these issues and how to resolve or fix them! Below you can see how the Color blind see these colors that are normal for us.

Normal Color Vision

Green-type Color Blindness

Red-type Color Blindness

Blue-type Color Blindness

Below are some things we can change to help people with this condition out

Charts and Statistics

A common issue is when you have a chart or statistics to show on your website the worst you can do is show the key for the chart away from the information you are displaying thus making it hard for the people that are color blind to tell it apart and read the stats.

When hovering over the chart with your mouse cursor an alternative greyscale version is showed. This version uses a grayscale gradient type color scheme; from light to dark. This eliminates the need for naming, recognizing and comparing the colors in the chart to the legend.

A very good example of how simple alternatives can provide a solution, even without changing the way a website looks.

Color Picker

What is the user that is color blind is wanting to make a customization to their twitter page? or blogger or anything else that lets you do something similar, sometimes the website allows you to color pick and select colors, which is very helpful for you and me, but for anyone with color blindness it really is not helpful at all unless they memorize all the hexadecimal color codes. Which is unlikely!

Fixing this issue 

Having the color picker would require to solve the naming and making combination problems. I would suggest providing a set of default colors with their names available.

Microsoft Word does a great job at this. When hovering over one of the predefined standard and theme colors you’ll get the name of that color. It’s still possible to pick a different color using a color picker like the one twitter uses, but this picker is hidden behind the ‘more colors’ option.

The Twitter profile design page already uses this pattern for the background selection. A set of default suggested backgrounds and the option to upload your own. These backgrounds could even be paired with suggested colors.

As with most fixes that benefit the colorblind this also benefits non colorblind users.

Readability

Readability is a app that wants you to read comfortably— anytime, anywhere. But what if you’re colorblind?

Readability offers you a clean reading experience by stripping webpages from any distracting elements like ads, sidebars and navigation. You can convert any webpage into a Readability version and read it in your browser on a laptop or desktop. They also offer iOS and Android apps to take your articles with you.

Articles are stripped of any markup and converted into a consistent clean design. In this design the text-links are red without an underline. This poses a problem for the colorblind, especially the protan- (red) types of colorblindness.

Solutions lie in increasing contrast (pure bright red: #ff0000 instead of dark red: #9C0001), underlining links or adding an icon next to it like Wikipedia does with its external links.

A special colorblind mode might be a last option if changing the design of text-links does not fit within the default style.

Colorama App Development and Design

Logo Ideas

I decided to go ahead for the one on the top left, as that has a good balance of detail and simplicity, it also is the one that shows the Apps intention and support. as the cut in the pupil shows the blindness for the eye, but not complete so that symbolism partial blindness but in this case its for color instead of vision. Next i will look at some color scheme for the logo.

As for the color ideas i wanted to keep it simple! as the logo is simple, so here are two variations of the logo, one on the blue background as the App is based off a blue main color. the other variation is with the colors inverted to show the varied design, this can be used on thing such as T-shirts, Letterheads and more.

Wireframes

Splash Screen

This is the splash screen for the app once the user loads it up, they will see the background and logo in the center of the screen while it loads up.

 Main Menu

This is the main menu, this menu shows the options of the App to the user, so from here they can select if they want to scan a color, or if they would like suggestions fro ma specific color they already got in mind.

 Scan Colors

Here is the screen that comes up if the user wants to scan a color ,the preview window shows what the user is seeing through the phones camera, and on the screen will be a button to ask if they would like to scan now to begin scanning the color in the view.

 Scan Results

On this screen the user has a option to re-scan, and the results are shown below at the bottom in text form, and it also provides the Hex color code if needed. 

 Suggestion

Here is the screen similar to the scanning a color but with the results on this page you are able to see matching colors. So you can purchase or find other products that have a colors that compliment the last or fit well without too much contrast between the colors.

Mock up Designs

Splash Screen

 Main Menu

 Scanning

 Results

 Suggestion

I've made the working version below using Aurasma,

To do this i had to use the Website Aurasma, on this website you are able to upload a trigger image, this image is then used by the App on your phone for Aurasma which will then initiate whatever you have set it up to do!, so what i did was i set the awaiting scan image as the trigger image.

After this i then used this a video i had created using after effects at the same size of the image to be the overlay, so when the user scanned the image it would play the video behind it which would look seamless and represent.

The video shows what the scan taking place would look like as the color is scanned for the App, and the results are shown within seconds of scanning, it would then be able to scan the color of the clothes by having a grid system that scans each square grid, this then shows what the average color is and displays a color for the user to see.

To run it simply Scan the image below which is the trigger image

Please Find the Portfolio Display of the work and Apps on my Behance page located here

https://www.behance.net/Atif786

Bibliography - 

http://wearecolorblind.com/ - 10.5.15

http://www.tomsguide.com/us/pictures-story/657-best-augmented-reality-apps.html - 10.5.15

http://en.wikipedia.org/wiki/Augmented_reality - 10.5.15