User interface design is a force within the design industry. It’s an area of the profession with a great deal of momentum–and it continues to grow and change the landscape of design as we know it.
As important as user interface design is to the industry, not every designer is well-versed in UI. So whether you’re experienced in user interface or you specialize in another area of design, we’ve compiled five unique user interfaces (UI) and the stories behind them for a sneak peek into this wild world.
Did you know that a 10-foot interface isn’t actually 10 feet long? Or, that a zooming interface allows for an unlimited amount of data to be displayed? Check out how user interfaces have evolved over time based on user-adoption and advancement in technologies.
The Story: Most of us are familiar with graphical user interface (GUI), but the first time the metaphors of windows and icons were used in reference to a computer the user interface was named after the four main elements in the interface: Windows, Icon, Menu, and Pointer. Known as WIMP, this was the first of its kind. Windows are the self-contained boxes for each application that can be drug around using a mouse pointer, and they can be opened by clicking on the icon. Instead of commands, the user clicked menu items for specific operations.
○ Windows: independent terminals for directory browsing or containing an application
○ Icons: small, memorable graphical representations for an application or utility
○ Menus: list of commands related to the current application
○ Pointers: the pixel-based cursors used to interact with Windows, Icons, and Menus
Used In: WIMP was first used in the home screen of Xerox Star computers and later adopted in Apple Lisa computers.
2. 10-Foot UI
The Story: The 10-foot user interface sounds pretty long, right? It’s actually a software interface designed for TVs was named after the distance between the display device and the viewer. With set-top boxes like Apple TV and Roku becoming a household name for watching TV, there’s a new set of apps becoming popular which focus on Internet media in the form of movies, videos and picture slideshows. For these apps, you have to design the UI with a completely different set of ideas. Unlike computers or tablets which are 1–2 feet from the user and require user interaction, a TV app is meant to give an immersive user experience with the least amount of user interaction.
○ Seamless, continuous play experience in audio, video, slideshow and live streaming
○ Standard remote with D-pad style navigation is preferred
○ Simple, user-friendly navigation
○ Use of standard visual icons for static navigation menus
○ Carousel user interface is very popular in TVs where the selected item is highlighted at the center
○ Gallery view with large thumbnails with images
Used in: The 10-foot user interface is used for navigating content in video players.
3. Zooming User Interface (ZUI)
The Story: Zooming user interface was named after the endless zooming capabilities in this particular interface. ZUI can put a lot of information into a single screen view and then allow users to zoom into parts of the “view” to get more details. The viewer can zoom in even more to get to a particular part of the application. At any point in time, the user is in a single-page view. For example, view a world map in a single screen and then zoom in on a continent, a country and so on. Each level gives relevant details, and the main interaction by the viewer is to tap or click on a particular part of the application and zoom in and out. Designed primarily for view-only applications, it’s seldom used for interactions.
○ Use of high-quality scalable vector graphics or multiple layers of high-quality .png images
○ User interface with the following transparent controls to
- Zoom in and out of the interface
- Pan across the interface by dragging
- Full screen option
- Option to go back to the start screen
Used In: HardRock http://memorabilia.hardrock.com/ , DeepZoom technology
4. Interactive Voice Response UI
The Story: Interactive voice response UI is a unique interface with no graphical elements, which allows a computer to interact with the user. It is a decision tree-based interface that interacts with the user on a set of choices using a pre-recorded voice. It’s been used with automated telephone services, in an effort to assist customers all day, every day.
○ Software application to create the flow of decisions
○ Text-to-speech software on the server
○ Pre-defined data for information at each user choice point
Used In: Banking telephone supports
5. 3D UI
Story behind: 3D UI is an interface which uses three main aspects of display: perspective, transformation and light effect. These provide a more realistic view to the elements in the interface. The 3D interface allows users to rotate, scale, and transform elements in the user interface as per their requirements. For example, if you want to interact with a cube in a user interface, you’ll probably want to rotate the cube to see the back side.
○ Simple mapping with mouse and keyboard
○ Simple elements for interaction
Used to: Display and interact with 3D design of real-world objects for better understanding (such as human anatomy, virtual Rubik’s cube, etc).
Want more about user interfaces? Build your interactive skillset at HOW Interactive Design Conference Nov. 5-7 in Chicago. Hear from interactive experts like James Pannafino and Todd Zaki Warfel!
Register Now! The early bird registration price ends soon!