Eyeo Festival 2014, A Designer’s Recap

 

 

 

In this ever-changing industry, artists and designers instinctively grow and change with the technology of the era. This past week, I attended the Eyeo Festival in Minneapolis, Minnesota. The festival assembled an incredible set of creative coders, data designers and artists. They conducted fascinating presentations, unique workshops and interactions.

There were a few of the presentations that resonated with me and were very inspirational.

I have been focusing on mobile design, and was inspired by an interactive architecture project built by Janet Echelman and Aaron Koblin during a TED Conference in Vancouver.

View The Making of Unnumbered Sparks Video

Janet Echelman is a sculptor who creates textiles made of braided fiber, and Aaron Koblin is a digital artist who works at Google. Their combined skills allowed for a project in which people used their mobile phones to cast kinetic projections on a building-sized net. Their gestures of tracing brightly-colored paths across their device was projected as splashes of color on the large texture canvas.

My long adoration of typography initiated my admiration and interest in the work of Luke DuBois. His work of Hindsight is Always 20/20 is an interesting tie between typography and portraiture. Luke took the State of the Union addresses from each president and sorted them according to words used most frequently. He then generated eye charts for each president, with the more frequent words larger at the top of the chart and the less frequent words smaller at the bottom. Additionally, eye chart information appears in the margins concerning the use of the chart as a testing device. Luke says in his essay that, “The aim of the piece is to make a statement about the perennial political metaphor of vision, without which much of the rhetoric of presidential politics quickly deflates. The choice of words employed by a given presidential administration to articulate its message is in many ways its signature. Looking back, we can use this vocabulary to test the metaphorical eyesight of the nation throughout its history.” Luke displays the work so that they actually worked as 20/20 charts to the view.

I found the work by Tahir Hemphill very innovative and unique. He created a semantic and sentiment of lyrics from American hip-hop artists. He focused on whether artists such as Drake and Tupac had more positive or negative words in their lyrics. He was inspired by Picasso’s light paintings, which give something that is temporal and doesn’t exist in a visual format. He then utilized a robot arm to create the light paintings of the data, and then he took photographs of each artist’s result. You can see the results here.

Lastly, I connected with Stefanie Posavec because she is a designer who was inspired by data and used it as her medium. She did an artist residency at Facebook in the Analog Research Lab and created interactive pieces on the floor that converted a month of a couple’s Facebook interaction data into dance steps. This portrayed how couples publicly show their relationships on social media. The dance steps were timed to an 8-step count and were an accurate representation of a couple’s digital movements and interactions in the real world. You can view examples of the work here.

The festival allowed me to reflect on myself as a designer, encouraged me to think about projects from a conceptual standpoint, and inspired me to look forward to my future growth as a designer. This festival taught me where the future of artistry is going and what large possibilities exist for future endeavors for the company and myself.

 

Keep It Simple: Thoughts on Designing for Augmented Reality

We know that mobile is here to stay. But as a designer, I ask myself, “What now? What will be the next big thing?” What if designers could take their interface designs and put them in the real world? That would be pretty cool, right?

Well, the ability to have a Mission Impossible interface has arrived through what are called “first-person” user interfaces.

So, what are they? Luke Wroblewski describes first-person interfaces as the following:

“First person user interfaces can be a good fit for applications that allow people to navigate the real world, “augment” their immediate surroundings with relevant information, and interact with objects or people directly around them.”

Predictions show that first-person user interfaces will one day be as popular as graphical user interfaces. These interfaces leverage the affordances of mobile devices, such as GPS, camera and Internet. Luke’s graphic below demonstrates that this interface is emerging in the industry and how it stands in relation to other types of user interfaces. This graphic suggests that mobile devices are in a period of growth, while wearables are an emerging trend.

Source: www.lukew.com

So what should a designer focus on when creating these types of interfaces?

First person mirrors your perspective of the world. Luke says that these types of interfaces are typically utilized for applications that involve a GPS or navigation. We are taking the natural interface and using heads-up display (HUD) elements to emphasize the first-person view.

He also suggests that a designer should use colors and graphics that more accurately match real surroundings. This is vital to the user experience since they are interacting with the world as they experience it. As always, when designing for mobile, designers should consider gestures that are typically used for that device. For example, if the standard action is swiping, then use a swipe action.

What are the typical HUD elements found in first-person interfaces? Luke says that data windows, markers, orientation, transparent UIs, and spatial grids are utilized within the HUD.

Let’s look at the Layar app. Basically, it is a free augmented reality application that displays digital information on top of what you see through your camera.

 

Source: http://5election.com/2010/06/18/augmented-reality-a-short-history-of-mobile-ar/

The designer needs to consider the negative space that occurs when designing the HUD elements that relate to the background elements. For example, in the Layar app, the underlying imagery is so versatile. Additionally, the graphical HUD elements should be non-photographical and flat on top of the real-world imagery. Augmented reality systems superimpose graphics for every perspective and adjust to every movement of the user’s head and eyes. We see in the upper right area of the Layar interface an indicator that displays in which location the user is currently.

Imagery and content also reside within the space in order to help inform the user about that specific location. For example, we see that the Layar interface has direction symbols and contact information that appears once an icon is selected. In addition, ambient light/dark environment awareness on the device is important and must be considered to help resolve this problem. The Layar app fades the icons that are receding in space and has a full opacity to the icons that are close to the user. It is important for the designer to have minimal navigation and use transparency in order to convey the information to the user with ease.

Below is another app, Nearest Places, (which has since been swallowed into Augmented Reality Browser).  This utilizes appropriately sized targets and maintains spacing between the targets very well.

I want to take note of the great use of contrast between the brightly colored icons and the dark backgrounds of the markers. Since this app is in a city setting, the designer imagined that the background environment would likely appear textured and muted. This is why the solid, bright, non-textural markers and icons work so well within the application.

You can also see that they focused on the navigation first, then the interaction design, which is vital to the success of the application. The capabilities of the device were considered such as device positioning, motion, orientation and proximity. The app shows the user’s position and direction, which is a great use of an extension of the user to the device.

 

Source: https://itunes.apple.com/us/app/new-york-nearest-subway/id323100520?mt=8

I find that iconography is so vital to the success of this type of interface. If designers don’t focus on the importance of symbolism and research in semiotics, the success of this type of interface could be minimal. For example, the amount of research that was conducted when designing the highway road sign was massive. I have no doubt that we will need to do the same with first-person user interfaces so that there is great clarity for the user.

The beauty of a first-person interface lies in its ability to directly translate real-life perspectives. After reading about first-person interfaces, I remembered the old saying KISS. Simplify, simplify, simplify.

A designer needs to remember that content is first when designing for mobile and to shed unnecessary details. Think of the device as an extension of yourself.

 

Upcoming Float Symposium


Iona’s sister company, Float Mobile Learning, will hold its second annual one-day symposium on mobile learning this summer in Chicago.

As you may know, Float developed from The Iona Group in 2010. Iona has been in business since 1984, and one of its core practices throughout that period has been eLearning. Though similar, mobile learning is not just eLearning ported directly to a mobile device. Recognizing this difference, Iona branched out in 2010 to start a new venture called Float. Float, under the guidance of managing director Chad Udell, has worked with Fortune 500 companies and industry-leading companies such as Caterpillar, Pioneer Hi-Bred and Wiley Publishing.

This year’s Float Mobile Learning Symposium will take place at the brand-new startup incubator 1871 inside the Merchandise Mart on Monday, June 25, in conjunction with Techweek, an event attended by thousands of people interested in technology. The Symposium will feature experts from outside organizations such as Groupon’s Shay Howe, mobile experience author Steven Hoober, and Aaron Silvers, the chief learning officer of Problem Solutions. Our speakers have expertise in mobile design, development, and strategy work.

The intent of this Symposium is to bring current and future thinking regarding mobile learning to organizations. Float wants to continue to spark interest in how best to get your organization to think about mobile learning. The Symposium lasts a full day, half of the day focused on business and strategy with the other half focused on design and development.

The price for the Float Mobile Learning Symposium 2012 is just $79 through Friday, May 4. After May 4, the price increases to only $99. The registration fee covers entry into the event, as well as a continental breakfast and lunch.

Click here to view more information about this year’s Float Mobile Learning Symposium.

Importance of Prototyping

Here is an image from “paper prototype” testing we performed recently for an experiential learning system we are building for the National Sequestration Education Center (NSEC) in Decatur, IL.

The user testing was for the Sequestration Technology Educational Learning Array (STELA) we are developing for the NSEC at Richland Community College. Sequestration? Basically, it is a relatively new technology that captures surplus carbon emissions from coal-fired power plants or ethanol plants and stores this material safely underground. STELA will show visitors how this process works and why it is important.

Building interactive experiences that entertain and engage their audiences is always a challenging job. Quite a bit of careful planning and work goes into strategy, graphic design, content creation, moodboard development, wireframes, graphical user interface design, etc. At The Iona Group, we place a high value on audience feedback and testing. We schedule rigorous testing sessions at several points in the design and development process to make sure that users “get it” and are able to explore the material a fun and intuitive way. Invariably, our test participants give us valuable direction and surface new issues we realize we have to solve.

Test participants last week ranged from 8 years old to 30 something. One thing was universal; participants were driven much more by graphical information than written instructions. With every testing session we conduct, I realize how true this observation is. People want to be excited, jump right into an experience, and be entertained and engaged. If they happen to learn something along the way, that’s OK. Having said that, we understand this reality and have built many installations that have engaged audiences and achieved their intended leaning objectives.

Several of our assumptions for game play were upheld by our testers. Most users were able to move through the experience without issue. The need to move some of the elements to different locations to increase overall interaction became apparent.

It is far better to discover this now than after we have built graphics, animations and programming that need to be revised. Paper prototyping is almost always a bumpy ride but it’s a great discipline that pays off with good insights that make the rest of the development process go smoother.

Understanding the Differences between Designing for Mobile and Desktop Media While Learning the Best Practices for Designing iPhone Applications

As a designer, my job is to solve problems and create a solution for a client. Mobile devices have now opened a door to a different kind of problem solving than with desktop media. I recently read a book called Tapworthy: Designing Great iPhone Apps by Josh Clark. The book is extremely helpful for any designer who is designing for mobile devices, especially the iOS platform. The mobile experience is a totally different user experience. The design elements and layout need to be thought of in a new and different way than with websites, interactive or application design. I highly recommend this book for anyone who is starting to design for mobile. Even though the book focuses on the iPhone, the methods can be applied for virtually any touchscreen smartphone. One of the main reasons I enjoyed this book so much is that Clark described layout and graphical element design, along with providing visual examples to mobile design methods and standards. Through the reading of this book, designers and developers can create high quality apps that succeed in providing great solutions for their clients. I will describe Clark’s information regarding overall considerations for mobile design, the size and touch experience, layout design, graphical elements and overall style.

Overall Considerations:

Clark describes some key elements that designers need to understand and learn when working towards designing a successful mobile experience.

  • An app is used to provide a solution for the user: microtasking, location based information and staving off boredom.
  • Just like when designing for the desktop, use cases and scenarios should be considered.
  • To succeed with an application, it needs charisma, an identity of what makes it different from other applications and you must replenish content from time to time to give it a long shelf life in the store.
  • When designing a website companion app, consider how to improve the website, not just rebuild it.

Size and Touch:

Let’s face it, one of the biggest differences from designing for the desktop verses a mobile device is that it is smaller and you touch it to interact with it instead of using the mouse/cursor. Clark writes about best practices for the mobile user experience in the face of these considerations. I have listed his main points below.

  • Ergonomics are key. Consider how the interface feels to the user. Tap, slide and flick are based upon the life-like realism of physics.
  • When designing the screen layout, the primary controls need to be placed within the thumb’s hot zone.
  • Consider that it is a one-hand touch experience.
  • Organize the layout to fingers and thumb.
  • For the iPhone, designers need to make all tap areas 44 pixels or larger to enable easily tapped areas. If designing with a tab bar, it is 49 pixels wide. All tab bar icons should be 30×30 pixels and icons for the toolbar and navigation should be 20×20 pixels. Keeping in mind that a 44×44 area is the standard for the touch size.
  • Place primary content at top and navigation at the bottom, mainly the left-hand side.
  • To consider both left and right-hand users span buttons to the entire width of the screen.
  • Large buttons not only give a clear guidance, but when using them, the users can’t miss tap targets no matter what hand they are using during their experience.
  • Keep on screen elements to a bare minimum. Keep the main navigation in easy reach and avoid scrolling when appropriate.
  • It is best practice to have no more than 5 icons for navigation in a tab bar.
  • Scrolling should be used with caution, but scrolling can be utilized when users are reading a large amount of content such as an article or book.
  • In order to deal with large amounts of content on the screen, designers can create different states through taps. Designers don’t have to show all of the content at once. For example, a weather app can display the weather for daily, weekly and hourly through different buttons.
  • Make advanced tools hidden. These tools can emerge from the main navigation upon demand, but don’t need to present up front.

Layout:

Unlike web design, users should be able to flip through screens in a straight line, through sets or categories or a neatly categorized collection of information. There are three ready-made navigation models created by Apple that can be used for one’s design, making it easy for designers to have a jumping off point in their design. I am going to describe the three Clark provided below and list the best practices for each of the models:


1. Flat pages

  • Apps with a single main screen that are highly graphical.
  • These are no-scroll displays, but might have multiple versions of a main screen that one can swipe left-to-right to view.
  • Best used for browsing and discovery for the user.
  • Has a standard page control at the bottom of the screen for the user.

2. Tab bar

  • Buttons at the bottom of the screen that let you switch among the app’s main functions. One can tap a button to jump to a new screen.
  • Good for modes of operation for specific features or information for the user.
  • Users can only view 5 tabs at a time.

3. Tree structure

  • A drill down of hierarchy through categorized options or content. Users can easily go back to the main content.
  • Organization and navigation lends itself to list organization.
  • Tables can be used for lists in tree-structured apps. Tables present a selectable list of options, index a long list of items for rapid browsing and list and group content details.
  • Within tables, there are labels, text views and web views. Labels are for short text, text views are for longer text and web views allows one to view a web page or view the app’s explicit information.

All three of these models provided by Apple can be combined within a single app. Clark explains that designers can use one model to organize the app’s primary features and another for secondary navigation. However, it is my experience that it is best to keep the user experience similar throughout the entire app; otherwise, users become confused when switching to another type of interaction during the experience.

I learned when reading Clark’s book that if users have to type, there are different default keyboards Apple provides to the user: ASCII, numbers and punctuation, URL, email address, number pad, phone pad and name phone pad. According to Clark, users do not like to type with a keyboard and prefer to avoid it if possible. Instead, as an alternative, there are “picker” controls that can be used as another option that look a lot like a slot machine. It allows users to choose from a set of options all at once. There are also “action sheets” which are similar to pull-down menus, offering a selection of commands to choose from for the user. The action sheets are modal views, which means that they pause the action and dim the screen behind when choosing the option. There are radio buttons and sliders that can also be used within the design. Clark explains that sliders are good for video or audio and radio buttons are good when creating settings within the application.

Graphical Elements and Style:

Just like other desktop media and methods, designers should sketch, brainstorm and create wireframes of the visual design and user experience before designing with Adobe Illustrator or Adobe Photoshop. I was reassured to read that the creative process is just as important when designing for apps before jumping into development. Just like interactive or web design, once the concept, look and feel and user experience is defined, then development can begin. I realize that some development is created simultaneously during the design phase but the project has to be defined beforehand. There is a formal sketch application offered called App Sketchpad www.appsketchbook.com designers can use for sketching. When I was designing an iPhone application for a client, I utilized some references online when creating my designs in Adobe Photoshop. The beauty of these mock-up examples is that you don’t have to create all of the basic iPhone elements from scratch and the pixel aspect ratios are begun for designers. Here are two helpful links below:
iPhone elements for Adobe Photoshop by Geoff Teehan:

 

http://www.teehanlax.com/blog/ipad-gui-psd/

iPhone elements for Adobe Illustrator: http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
There are visual design tidbits that I found very helpful within the book in regards to the overall design.

  • Destructive actions should get special treatment, such as being designed using red. As with any design, consistency in the look and feel of navigation will assist users in understanding their experience.
  • Unlike web design where there are up, over and down states to buttons, designers need to design in two states: disabled and selected.
  • Limit the screen to two bars: navigation and a tab or toolbar
  • Consider the personality you want the design to have to the public. Use this personality to shape the design.
  • The app icon is the first impression and the most important design element for the app. Icons in general should be clear silhouettes and have little to no detail. It is good to add labels to icons. Make sure it describes the app’s function, interface, name or brand.
  • Realistic interface elements invite touch. Use the physical world for graphical elements, but make sure they are relevant to the controls.
  • Use everyday objects as a metaphor for the interface. For example, a musical app that mimics the appearance of a piano or a bookshelf for browsing books. The reason for this is that experience informs gestures.

As a designer I always ask the client to tell me how I can create a look and feel that really gets to the core of what one wants visually to a design. Not only do I want to create realism and mimic everyday object, but also how can I create realism that will not cause the files to become overly large for the developer? Clark did just that for me. I have listed them below. I find that a lot of these techniques are very similar to the old web design 2.0 methodologies.

  • Bright colors should be used to draw attention to an area. However, they can cause readability problems in bright sunlight due to glare.
  • Use custom colors and graphics to custom controls along with textural elements, which will help a realistic look and feel.
  • Use Apple’s signature gloss to one’s advantage when wanting to create a gradient effect to a toolbar.
  • Clark suggests to only create slight changes to familiar controls to the user such as for chatting replacing a standard dot with a speech bubble.
  • The standard elements can be changed with color tints and background images can be added. A designer has to remember that if you tint one toolbar, you have to tint them all consistently.
  • High contrast is important. When working with fonts, gray text needs to be avoided against a white background and black is favored.
  • The standard iPhone font is Helvetica. Clark states that it is best to not stray away from that typeface. Users can utilize other typefaces in logos and graphics. Serif fonts can be used for large amounts of text, such as an article.
  • Organic textures add luxury to the design and should be utilized as much as possible.
  • Use a gentle radial or linear gradient in Adobe Photoshop on elements to suggest top lighting or add a light and dark line between elements to create a beveled border.
  • Add only a 1-3 pixel drop shadow in Adobe Photoshop to create depth. Color variation with borders can also be utilized to achieve this effect. Similar to web design, drop shadows can be used for text to create raised or embossed for buttons.
  • Keep borders clean with sharp outlines. Jagged areas distract the user.

So what elements can a designer change within the interface without creating problems? After reading this book, I realized that it is indeed effective to not create apps that are blue, white with pinstriped backgrounds that are bland. Designers have the option to create interfaces with style and personality just like with interactive or web design. Developers and designers can use Apple’s stock controls and basic elements in conjunction with interesting visuals or add additional graphical imagery. For example, there are standard icons for toolbars and navigation bars, standard search bars with results, and standard tab bar icons. Many of these elements are in the Adobe Photoshop template image seen above by Geoff Teehan. As long as the standard controls are within the application and the design follows the wireframe, designers can make the app look fresh and have the personality desired.

I learned through reading Designing Great iPhone Apps by Josh Clark how to create high quality, polished apps that succeed in providing great design solutions. Experienced designers know the best practices for web, interactive or application design. One can conclude that when learning about mobile design, many of the techniques and methods are similar. However, some are vastly different. I hope this article brought you some insight in designing for a mobile platform from a designer’s perspective and brought you as much excitement as Clark’s book did for me.

Page 1 of 212