All Posts in design

Improving Large Touch Screen Kiosks

You often see large, interactive touch screen kiosk installations at trade shows, conferences, or static exhibits. The user usually walks up to the touch display and interacts with an application. This application might include video and written content with an interactive element, perhaps a quiz or a simple game. One might think developing for touch kiosks is the same as developing for a tablet except on a larger scale. There are definitely similarities between the two but the large format presents unique challenges and opportunities.

THE MAGIC OF HTML5

Typically, HTML5 is used to build touch-screen applications. The User Experiences are essentially single-page web applications. Wrecking Ball uses technologies such as WebGL to create fluid 3D experiences that feel nothing like a regular website. The application typically runs on a local PC that is connected directly to the touch display. The benefit is that there are virtually no concerns about file size, video streaming, or load time but you do have to be very careful about performance. Complex animations can be CPU intensive. Today's trend consists of building responsive websites for myriad screen sizes and devices. With large-scale, fixed screen sizes, we can build applications that only have to work on one browser at one specific resolution. The end result is an immersive experience that can be built on a fixed budget with a tight timeline.

FLAUNT YOUR CONTENT

Interactive kiosks work very well when presenting a large amount of content. Maybe you have hundreds of videos you want to showcase or thousands of entries in a database that you want to be displayed in a beautiful, attractive design. Interactivity and user experience plays a big role in the way it empowers the user to browse the content.

Adobe invited Wrecking Ball to concept, design, and build an interactive experience for their library of patents. Visitors to Adobe's home office can browse and learn about its 3,000+ patents and their hundreds of inventors while waiting in the lobby. Wrecking Ball developed the installation using web standards and built a custom CMS to manage the assets. The result was a beautiful, 3D, abstract object with each point in the object representing a different patent. Users can rotate the 3D object easily to browse patents. Wrecking Ball fine tuned the project with an original, visually stunning interface putting Adobe’s patents in the spotlight at Adobe's main headquarters!

patent-innovation

Learn more about Wrecking Ball's patent installation at the Adobe Patent Innovation page.

MAKE IT ATTRACTIVE

One aspect of creating an interactive kiosk is the experience when no one is using the device. Similar to the “attract mode” or “idle mode” of arcade games, our interactive kiosks have a similar idle experience. We have the option to show a video, show part of the main interaction, or cycle to a title screen with a call to action like “touch here to begin.” Everything is scripted using one or more looping timers and anything is possible.

Wrecking Ball had a great idea for a "idle mode" when asked to help Adobe define their Adobe Youth Voices program digitally. The new platform for Adobe Youth Voices launched with the #withMalala campaign, hosted by The Malala Fund. The interactive kiosk that Wrecking Ball built for #withMalala displayed global artwork aimed to incite social change. The idle mode of this kiosk was an elegant screensaver with scaling circles smoothly animating to look like a rising sun catching the eye of anyone who walked by the screen.

malala1 malala2 malala3

Learn more about Wrecking Ball's #withMalala platform at the Project 1324 page.

If you are interested in learning more about interactive kiosks or large scale, interactive touch screens, send us an email at hello@getwrecked.com.

The Future of UI Design and Its Impacts on Everday Life

Science fiction often influences the world of technology by showing us the impossible. Today's iPad is essentially the tablet computer from Star Trek: The Next Generation, and Back to the Future II in 1989 got a lot right about the technology of 2015. In fact, the man who invented the world’s first flip phone, the Motorola Star-Tac, was inspired by the Star Trek communicator.

The future is definitely exciting when it comes to innovations in technology and  in many ways, the future is already here! In this article we will review examples of how future UI design will impact our everyday lives.

Gesture Interfaces

Tom Cruz in Minority Report. © 2002 Twentieth Century Fox Film Corporation.

Tom Cruz in Minority Report. © 2002 Twentieth Century Fox Film Corporation.

The most memorable futuristic user interfaces were shown in the Minority Report and Iron Man. These interfaces are the work of inventor John Underkoffler. He says the feedback loop between science fiction and reality is accelerating with every new summer blockbuster. He goes on to say, "there’s an openly symbiotic relationship between science fiction and the technology we use in real life. The interface is the OS - they are one."

In the video above, view a real-life demonstration of the futuristic user interfaces as seen in Minority Report. You can see how simple hand gestures can perform complex operations. Now imagine playing video games with such capabilities!

Light Ring

LightRing from Microsoft Research uses infrared to detect finger motion and a gyroscope to determine orientation, and it can turn any surface into an interface. You can tap, draw, flick and drag on a book, your knee, or the wall. For now, the interaction is with only one finger, but still provides a really attractive and natural looking way for user gestures.

This technology puts wearable computing to a whole new level! Imagine controlling your device anywhere and any way you choose. As shown in the video, the nature of using this technology is similar to using a mouse, so we are already familiar with how the product works.

Room Alive

RoomAlive is Microsoft Research's follow-up to IllumiRoom, which was presented at CES 2012. Both are steps towards a "this-is-our-house-now" Kinect future. The new system goes beyond projection mapping around a TV by adding input-output pixels on top of everything in the room. RoomAlive uses multiple depth cameras and spatially mapped projectors to overlay an interactive screen from which there is no escape.

Imagine “real-life” video games that transform your living room into the world of the game. Or imagine virtual home decoration, projecting your vision of what you want to rearrange or add to your home's decor.

Skin Buttons

The Skin Buttons project uses miniature projectors to display interactive icons on the skin around the watch face. This technology expands the interactive zone around a smartwatch without making it physically bigger. The projector parts cost less than $2 and can even increase battery life by shifting workload from the main display.

FlexSense

The FlexSense is a transparent sheet of plastic, but its embedded piezoelectric sensors detect exactly what shape it's in. This allows for all kinds of intuitive, paper-like interactions. For example, flipping up a corner to reveal something underneath, toggling layers in maps or drawings.

Imagine cell phone cases that react as you peel the cover. Or interactive books or children's books that react as you turn a page.

HaptoMime

HaptoMime uses ultrasound to create tactile feedback in midair, so you feel like you're touching a hovering image when there’s nothing there at all. It’s produced by a hidden LCD and an angled transmissive mirror. This technology has massive potential for any public display.

Zero UI

Zero UI isn't a new idea. If you've ever used an Amazon Echo, changed a channel by waving at a Microsoft Kinect, or setup a Nest thermostat, you've already used a device that could be considered part of Goodman's Zero UI thinking. It's all about getting away from the touchscreen, and interfacing with the devices around us in more natural ways. With methods such as haptics, computer vision, voice control, and artificial intelligence, Zero UI represents a whole new dimension for designers.

As these technologies become more intuitive and natural for the new generation of users, we will be treated to a more immersive computing experience that will continually test our ability to digest the flood of knowledge they have to share. The potential for change is both overwhelming and exciting for future user interfaces and it’s definitely something to look forward to when new technologies and ground breaking products come to market.

What makes the best app?

We are living in the age of mobile. Creating a mobile app is often necessary if a company wants to keep their name and services top of mind on today's mobile devices. As app users ourselves, we each have our own idea about what makes an app great. At Wrecking Ball, we have a lot of experience building awesome apps and we always ask the question - What are the characteristics that make a best-in-class app?

For Turner Studios, we created an interactive desktop publishing app. The app had attracted high ratings and waves of positive comments. You can learn more about it on Behance.

To understand more about what makes a great app, we polled our team of senior product managers, designers, and developers and came up with four areas to focus on for creating the best app possible.

Focus on one thing and do it well

The “less is more” principal weighs heavy in app design. A common mistake is to cram too many features into an app. Apps need to do one thing well. Those that focus on a simple concept have more of a chance to succeed.

Our app for Turner Studios focused on content delivery, showcasing their best work to stand out from their competition. With a simple navigation, you can browse featured content and videos.

Key Takeaway: Start with your core focus, execute it well, and earn the right to focus on additional features.

Know your audience

A great app is designed for its target audience. It understands its audience and caters to specific needs. It solves a problem that users struggle with on a regular basis that's unique to its target audience.

The essence of the idea needs to be unique to its audience. It talks to the specific needs of its users and either offers them something new that they didn’t know, something missed, or solves a problem that users struggle with on a regular basis.

Everyone knows about Turner Studios but their audience wanted to learn more about their amazing content. Our app made it easy to consume that content.

Key Takeaway: Research your audience and focus on meeting their specific needs.

Stability and speed are everything

Think about the main apps that you use every single day. They don’t crash, aren’t slow, and they do what you expect them to do. Great apps offer fast response times. In a matter of seconds, users can get in and out of the app and do what they were intended to do. These apps offer experiences like those of default apps put out by Apple and Google - they just work. We take this for granted. It’s not easy to get to that point. It takes patience and work to fine tune your app to reach this state.

Key Takeaway: Speed is a feature. Keep your scope tight to ensure your app is both stable and fast. Don't rush and always test for continuous improvement.

Keep it polished

Polish really helps separate an app. Focusing on the small details can help separate it from other apps and inspire both users and other app creators alike. Sprinkle a bit of design magic on it. Add something fun; anything that would make users smile.

Key Takeaway: The details matter. Animations, sound effects, interactions, and other little flourishes bring the app to life and make it impressive.

Conclusion

A great app is focused, intuitive, fast, and a pleasure to use. You should regularly explore apps featured on the app stores and those that receive awards from Apple and Google. By focusing on fulfilling the four criteria above, you'll have a greater chance at making the best app!

Further reading