Responsive Design and Infographics
Static infographics are a dime a dozen these days. Wal-Mart pricing models and generic template designs have paved the way to get more stories visualized to help boost engagement. The largest challenge is how to create a unique visualization in a generic world, without going interactive or breaking the bank. One solution: responsive design.
We get it. Justifying the cost of a custom graphic or interactive visualization for a simple data story doesn’t make sense. In our mind, what changes the game is data complexity. Multi-dimensional data supplies a complex story to tell, but at the same time complex stories translate into complex infographics, which can’t always be represented uniquely or accurately using generic templates. Prime examples are the long form infographics that get sized down due to their enormous amount of data, which users can not be expected to grasp quickly. We don’t want to call out specific examples, but if you are an infographic nut than you know what we are talking about.
Translating a static infographic into a responsive format allows for flexibility in accessibility and preference in layout. We see it in most websites these days, so why not infographics? To designers, static = print, which also equates to pdf’s, png’s, jpeg’s, etc. Ultimately print dictates layout options, which are limited. What responsive design requires is to go beyond one layout and look at flexible layouts to dynamically alter the same story. Here’s an example:
Let’s have fun:
Exhibit A – Static infographic
Exhibit B – Exhibit A responsive – (Once Opened, Just Resize The Window. Remember It’s a Prototype)
See the difference? What if you could go another level and add basic click ability? Is it still easily shareable? Absolutely.
What you see in front of you is a data set visualized that adjusts itself to provide you with the best visual experience based on resolution.
Now what if you added audio or other dynamic elements to improve engagement? Thoughts?
Gamification and UI Design
Here is something to think about: The gaming industry is the largest segment of the entertainment market by such a wide margin it’s staggering.
Music Industry = $4.0 Billion
Fiction Publishing = $2.0 Billion
Movies = $10.9 Billion
Video Games = $24.75 Billion
Not only is it larger than any other single segment, it eclipses all of them combined with a shocking 53% of the entertainment marketplace!
What does this have to do with Boost Labs or UI/UX Design in the business or government world?
Gaming is nothing but really effective communication and education.
If you are not familiar with video games then there are a few things that you need to understand. We are not talking about PacMan or any of the other games that were popular during the early toddler years of the industry. Today top games have budgets of 50 to 100 million and combine photorealistic worlds and characters that rival anything currently in the theaters.
In order for users to begin navigating these massive environments the first thing that must be built into the game is a logical way to educate the player on the environment and the tools at their disposal. To accomplish this the first few “levels” are nothing more than simple tasks in order to educate the player. As the game grows more difficult new skills are taught. If the skills are not learned effectively then the player must repeat the level until the skill is mastered.
When viewed from this perspective video games become nothing more than education in a specific skill set determined by the factors within the game. Imagine the possibilities of turning the same tools loose in an environment where those skills are applicable to a productive real world application.
This “gamification” of training and communication is really the most powerful tool available to enhance your online and mobile communication efforts today. It’s dynamic, memorable, and incredibly effective. In today’s market, having the largest set of features is just a piece of the success equation. How effective the delivery of grouped features based on levels or specific interactions is what separates a good app from a great app.
The best part of “gamification” is the ability to enhance productivity because the interface experiences keeps the user engaged and brings another level of interest to the task at hand. Who says you can’t have fun while working?
Thinking Beyond the PC – Why UI Design Will Play an Important Role in Application Interaction Across Multiple Platforms
In the past, application interface design focused on specific platforms in mind, mainly a PC. We have come a long way from the desktop application. These days when designing an application, you are forced to think beyond just the PC. Not only do we have multiple OS’s to contend with, but we have various browsers with different versions, an array of mobile options, and sometimes gaming consoles as a mode of interaction. To throw more fuel to the fire, innovation shops like Google are trying to redefine how a user interacts with apps. Google Glass, for instance, could provide a different way of working with an app which is similar to how mobile devices created the “app” world.
UI design plays a very important role in today’s applications. Designing an application requires the idea of building something beyond one device. That means scalability not only in function, but design, and details have to be thought out for every possible scenario both currently and in the future. Our question is, “Are you building your application with the future in mind?”
Some Design Ideas to Thinking about When Building Foundations for Applications:
Modular Functions/Frameworks – Developing an application to support modular functions, basically allowing for drag and drop function into roaming design layouts and having a framework that allows for a proper structure for the back-end.
Design Frameworks – Using CSS/Design based frameworks like BootStrap is effective in keeping some set of standardization for the options available to create the user interface. This will help make buttons, drop down menus, etc more modular and standardize the look/feel. This becomes very effective when building for multiple viewing platforms.
Responsive Design – Having the flexibility to accommodate various screen resolutions that can quickly adapt is becoming common practice. This is an effective solution to create an interface flexible enough to accommodate current platforms without the major investment of recreating various versions of the main application as separate apps. Visual Example:
Thinking In Multiple Views – This is where we feel building an application based on template themes can help maximize personal user experience, but also allow for expansion into different layouts for future mediums. This can ultimately lead to crowdsourcing valuable feedback to develop templates for users to help shape the future look of the application.
The goal of this article was to spark a creative look into your current application build or to think of the future of what could be. As tech continues to evolve, the cost of trying to keep up will become a greater. By investing into today’s UI design practices now, you could help prevent budget increases for future application needs.