User Interface Design

User Interface Design Basics

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.

Choosing Interface Elements

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.

Interface elements include but are not limited to:

• Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
• Containers: accordion

There are times when multiple elements might be appropriate for displaying content.  When this happens, it’s important to consider the trade-offs.  For example, sometimes elements that can help save you space, put more of a burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be. 

Best Practices for Designing an Interface

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 color and texture. You can direct attention toward or redirect attention away from items using color, 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 scanability, 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.

HUD and It's Principles

   The Head-Up Display (HUD) can project information on the windshield, tell you where to turn, notify you of lane markings, identify how close the car in front of you is and even give you restaurant information all right in front of your eyes -- and while you're actually able to see those objects or places. Such display
technology offers various opportunities for different types of
information presentation. Information in regularly available
HUDs is shown in symbolic style, but emerging contact analog HUD technology allows for a wider range of information presentation: virtual 3D information can be interactively
superimposed in the driving environment through Augmented
Reality (AR). ARs can integrate with GPS systems, infrared cameras, the Internet and mobile apps to turn your car's windshield into an on-board information screen. 

   A HUD should not obstruct the user's view. This is typically achieved by the use of projected or reflected transparent displays in line-of-sight. However, with display miniaturization, non-transparent but unobtrusive screens can provide similar functions.

Some of the earliest HUDs were used in military vehicles to assist in navigation and targeting. The first generation of that type of HUD used reflected CRT display. The second generation used solid-state light sources like LED to back-light LCD projection – this is the technology commonly used in commercial aircraft. The third generation uses wave-guided optics. The forth uses scanning lasers to project all types of images and video.

Basically HUDs are split into four generations reflecting the technology used to generate the images.

• First Generation—Use a CRT to generate an image on a phosphor screen, having the disadvantage of the phosphor screen coating degrading over time. The majority of HUDs in operation today are of this type.
• Second Generation—Use a solid state light source, for example LED, which is modulated by an LCD screen to display an image. These systems do not fade or require the high voltages of first generation systems. These systems are on commercial aircraft.
• Third Generation—Use optical waveguides to produce images directly in the combiner rather than use a projection system.
• Fourth Generation—Use a scanning laser to display images and even video imagery on a clear transparent medium.
  

AUGMENTED REALITY PRODUCTS DEMONSTRATION

1. 

This is an internet demonstration video about a zombie shooting application game based on Augmented Reality. Here, Characters are instantly created in the live environment which is
being shot by mobile camera. The video is mainly focused on the screen which is held by the demonstrator.



2.

This is also an internet demonstration video about an Augmented Reality app where Cloth Label can be scanned and the character in it will be animated in 3d. Here also mobile phone is the main focal point.
The angle is mostly maintained at Medium Close-up

3. 

Here, The Tablet is the main focal point which has the ability to scan every item based and view it in 360 3D level via Augmented Reality power. The Camera is maintained at Mid-shot most of the time.





4.

Another similar case here. This is an app where mobile phone can be used to scan a random photo
and view it in 3D and let it animate what ever it is, like Vehicle etc.

The Camera is always projected towards the screen which really deals with the demonstration well. The Angle is maintained at close up

PRODUCT DEMONSTRATIONS

1. XBOX ONE

Here, 2 people are demonstrating the new Xbox One. The Camera is on Eye Level most of the time
Focus is mainly on the screen. Various features are being demonstrated. This is an Internet Demonstration video.

The Target Audience is of course Youth people.
So the demonstration is based purely on technological aspects.


2. Skullcandy Headphones

 This is also another Internet Demonstration Video.
 The shot is done in way which focuses mainly on
 Headphone position. The Target audience is again
 Youth Music lovers and Sound Engineers. So each
 and every bit of sound information is clearly  explained




3.

This is also another Internet demonstration video.
Here, Most of the video is mainly showing the camera screen activities,fitting camera closely to the screen.. So each and every features are clearly explained to the target audience which are mainly photographers. The Color scheme is cool and blue tinted across.



4. Nokia Lumia

This is a TV Channel demonstration Ad which
concentrate mainly on the user interface of the mobile. The Camera angle is close up most of the time.  The Target audience is mainly Youth and Working Professionals. The color scheme is
warm



5.

 This is also an internet product demonstration of
 The New Windows tablet. The whole working  functions and user interface is demonstrated by the  narrator. The Target audience is mainly  Technology  loving Youth and  Business Professionals. The  Camera angle is maintained as Mid Shot

VFX COMPOSITING BREAKDOWNS

1. 

This scene is done by Detailed
Rotoscopy. The Interior background

Setup is made up up of Full CG including Effects and CG Lighting.

The character is shot separate and rotoscopy is done to composite into the final created background lightened up digitally.

2.


The Entire crew is shot in a green screen and are
keyed out and put up into an entirely different
background consisting of full CG Effects, Lighting and Matte Painting.

The Final shot is then Color Corrected




3.


Here, Blue screen is sued instead of green as character costumes are having few green elements.
It is then keyed out and put out into different background which is already composited using various elements like sky replacement etc.

The Final shot is then color corrected to match the background




4.


Here, character is as usual shot in a green screen,then keyed out and composited into a technological background completely made up of CG elements including HUDs

The final short is color corrected to suit a dark environment.



5.

Here, Character is litten up in a green screen, then keyed out and
composited into a Completely CG background including light flare effects

 6.




Here, A Normal shot is modified by compositing.
Various extra elements such as photographs, 3D models etc are composited into the background
with added effects including sky replacement

The Shot is then color corrected to give a dark look










7.

Here, the shot is consisted of Set Models and characters together. They are shot in green screen
and then composited into a real-time footage
to deliver the realistic desired output.

The final shot is then color corrected to match the
real-time environment





8.

This is another simple green screen shot which is keyed out
and composited into a CG background with CG lighting
and then color corrected.

AUGMENTED REALITY - RESEARCH

       Augmented reality (AR) is cutting-edge technology that allows for a digitally enhanced view of the real world, connecting you with more meaningful content in your everyday life. With the camera and sensors in a smart phone or tablet, AR adds layers of digital information like videos, photos, sounds directly on top of items in the world around us

      It blurs the line between what's real and what's computer-generated by enhancing what we see, hear, feel and smell. Augmented reality is changing the way we view the world -- or at least the way its users see the world. Picture yourself walking or driving down the street. With augmented-reality displays, which will eventually look much like a normal pair of glasses, informative graphics will appear in your field of view, and audio will coincide with whatever you see. These enhancements will be refreshed continually to reflect the movements of your head.

    The basic idea of augmented reality is to superimpose graphics, audio and other sensory enhancements over a real-world environment in real time.

Some basic components that are found in many augmented reality systems:

1.Camera 2.Small projector 3.Smartphone 4.Mirror

These components are strung together in a lanyard like apparatus that the user wears around his neck. The user also wears four coloured caps on the fingers, and these caps are used to manipulate the images that the projector emits.

Today Augmented Reality is used in entertainment, military training, engineering design, robotics, manufacturing and other industries

Limitations and the Future of Augmented Reality

      Augmented reality still has some challenges to overcome. For example, GPS is only accurate to within 30 feet (9 meters) and doesn't work as well indoors, although improved image recognition technology may be able to help .

       People may not want to rely on their cell phones, which have small screens on which to superimpose information. For that reason, wearable devices like Google Glass or augmented-reality capable contact lenses and glasses will provide users with more convenient, expansive views of the world around them. Screen real estate will no longer be an issue. In the near future, you may be able to play a real-time strategy game on your computer, or you can invite a friend over, put on your AR glasses, and play on the tabletop in front of you.

       There are also privacy concerns. Image-recognition software coupled with AR will, quite soon, allow us to point our phones at people, even strangers, and instantly see information from their Facebook, Twitter, Amazon, LinkedIn or other online profiles. With most of these services people willingly put information about themselves online, but it may be an unwelcome shock to meet someone, only to have him instantly know so much about your life and background.

       Despite these concerns, imagine the possibilities: you may learn things about the city you've lived in for years just by pointing your AR-enabled phone at a nearby park or building. If you work in construction, you can save on materials by using virtual markers to designate where a beam should go or which structural support to inspect. Paleonthologists working in shifts to assemble a dinosaur skeleton could leave virtual "notes" to team members on the bones themselves, artists could produce virtual graffiti and doctors could overlay a digital image of a patient's X-rays onto a mannequin for added realism.

      The future of augmented reality is clearly bright, even as it already has found its way into our cell    phones and video game systems. For more information about the subject and where it's headed, take a look at the links on the next page.

SP 1 CHOSEN TOPIC

CONCEPT

 INSTANT MOVIE!  -  (WEARABLE GLASSES USED TO SCAN MOVIE POSTERS TO BOOK TICKETS , BASED ON AR)

* SCAN- Wear the Glass and just scan a movie poster
* SHOWS- All theatres and show times across the city will be shown in the product website
* TICKETS- Instant ticket booking option will be displayed followed by seat selection
* TRAILER- You can also see the trailer video of the movie
* IMDB REVIEW- IMDB Review of the movie will be shown

SCRIPT

(The Ad Demonstrator is standing in front of an Advertisement Wall which is fully stuck by movie posters)

[He says facing the camera]

"Are you tired of standing in Queue to watch your favourite movies?
   Well, You shouldn't be ,anymore"
"Let's have a look at this Augmented Reality 3D glass sponsored by
   instantmovieplus.com which works purely on satellite sensors"
 "Just wear it, and jump yourself into this world"

(He wears it. A Holographic HUD screen appears on his eye-view followed by the command 'SCAN')

"Simply look ahead and scan your favourite movie's poster. Now Let's snatch up Amazing Spiderman-2"
(Scanning is going on which will eventually display the Instantmovieplus.com website in HUD mode showing the  full  USER INTERFACE with the selected Movie title and poster.
The Main Menu is filled with options such as
TICKETS,  TRAILER,  IMDB , EXIT)

"Here it is, Check that out! Well, Aren't you bored of Youtube ads? Well, Here you can see your favourite Movie's Trailer in FULL HD instantly. Let's check it out! WOW.."
(Trailer of the movie starts)
"Okay,Let's go back to the main menu!"
(presses main menu button)

"Now Let's Check out  the critics review" (PRESSES IMDB)
(IMDB rating and review of the selected movie is shown)
"Wow, it is worth a watch isn't it?  So why wait? Let's book the tickets!"
(Presses main menu, Click TICKETS button)
"Here are the cinemas list. let's pick one..."
(Seat selection menu appears)
"Select your preferred seats and DONE!  Yea, Its lightning fast!"

"FINALLY , YOUR MOVIE TICKETS ARE READY. NOW JUST GO INSIDE THE CINEMAS !"
(Presses the Exit Button in the main menu, HUD screen disappears, back to real world)

"That's all folks, The glasses are gonna grab u soon! For more updates visit us at instantmovieplus.com. Cheers"