It’s now free, as part of the entire Techweek program. More information on speaker topics floatlearning.com/symposium
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.
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.
Over the past few months, I have been researching and practicing mobile design from a graphic designer’s perspective. As a graphic designer, I wanted to learn about the constrictions, features, aesthetic direction, specifications and constraints when working on a mobile design. Through creation, online classes and research, I discovered how to better create effective and innovative mobile designs.
1. Aesthetic and Layout
As a designer, I’ve learned that my choice of metaphor dramatically affects the design aesthetics of the interaction. It brings meaning to the design. Interactive elements should be visible, recognizable, reactive (i.e., elicits feedback), safe, and consistent.
A good mobile design does what the user expects it to do and has positive responses to the interactions. I think it is important to consider what the audience desires or likes through an emotional connection with the design. The look and feel should be consistent and designers should obtain any corporate branding materials from the client during the definition phase of the project.
Jen Gordon of Tapptics suggested that when selecting a color palette, a designer should consider the variety of environments for the user when they are using a mobile device. Designing high-contrast elements are helpful in legibility and readability. She said that a designer should have a character count limit for the body copy. This will help keep the design layout less cluttered during the development of the app.
Jen also noted that a four- or five-column layout is best for an app. The reason is because the standard iOS tab bar on the bottom can have no more than five icons. It is best to create columns for every tab element that a designer has within their design.
I found that Brian Fling’s mobile design process is best suited for a graphic designer when designing for mobile. It also was clear and concise. I have listed Fling’s process below:
“IDEA The first thing we need is an idea that inspires us.
NEEDS & GOALS Identify a basic need with our desired user.
CONTEXT The circumstances where information adds value.
STRATEGY How we can add value to the business.
DEVICE PLAN Choose the devices that best serves our audience.
DESIGN Create a user experience based around needs.
PROTOTYPE Test the experience within the context.
DEVELOPMENT Put all the pieces together.
TESTING And test, and test, and test some more.
OPTIMIZATION Reduce all assets to its lowest possible size.
PORTING Adapt for other devices that fit our strategy.”
3. Features and Gestures
When designing, every screen should have a purpose and gestural interaction defined. It is important to plan out the gestures that the user will be using during storyboarding/wireframing. A designer should define the navigational flow when creating sketches. All of the sketches should be rough at first.
Next, a second round of sketches should be created within a grid structure that has more detail and written definition. I have found that these second round of sketches can be used within a basic prototype.
As a result, the navigation and user experience issues that occur later on in the process can be address before any art is created. Through the creation of a prototype made from sketches, the usability can be tested before any graphics are created within Adobe Photoshop or Illustrator.
Because there are so many different platforms and devices when designing for mobile, it is important to know what the specific platform and device will be for the end product. As a result, I’ve come to know that a designer needs to know the dimensions, orientation, sensors and inputs on the device. They must know if it is iOS, Windows or webOS. These choices are going to affect the size of the assets for a developer and overall resolution.
I discovered that when complex designs are displayed on different mobile devices, the limited color depth on one device could cause banding, or unwanted posterization within a graphic. From a production standpoint, I realized it is good to use Adobe Photoshop with vector smart objects that are from Adobe Illustrator. It is best practice to use vector shape layers rather than bitmaps. If bitmaps have to be used, it is important to recreate create them as shape layers or smart objects.
Here is a list of the specifications for various iOS devices:
For iPhone Retina Display
For iPhone Non-Retina Display
320 px wide
480 px high
For iPad (portrait)
768 px wide
1024 px high
For iPad (landscape)
1024 px wide
I discovered that it is so important to design everything at the smallest file size first then the largest size to maintain fine details and prevent problems with composition and limited real estate. It is also best that when prepping file for the developer, you need to make elements the size they are going to appear in the final application. For example, a vector smart object in Adobe Illustrator should be the final size it will be exported as in Adobe Photoshop.
There are some good practices to follow when saving out files for a developer. For example, leaving a pixel buffer around images when saving out images will allow for better rendering of graphics. I also have come to know that PNGs are the best file type for all graphics when providing them to the developer. The reason is when any other file format is utilized, the iPhone has to do the same processing that Xcode does but it is doing it at run time rather than build time. Basically, the app will run slower if anything other than PNGs are utilized.
For iOS apps, designers also need to save out app icons in various sizes for developers. Apple’s iOS Human Interface Guidelines explains them.
As with any design project, the user and target audience need to be a major factor during the entire phase of the project. When designing for mobile, designers need to consider the persona of the user and when will they use the device, how often they will use the device and where they will use the device. It is important to remember that unlike the iPhone, iPad users won’t always have Internet access.
In addition, it is more effective to design a website for mobile first and then design for the desktop. “Users don’t complain about lack of features,” said Red Foundry CEO Jim Heising. “Users complain about features that don’t work.” Designers need to compress content where possible, and avoid providing unnecessary content.
I’ve learned that a designer needs to create and test the app during the sketching and wireframing in Adobe Photoshop. There are only two states when creating buttons, an inactive and an active state. Test designs on the device it will live on at the end of the project. I’ve used FieldTest and found it very efficient and effective. A designer needs to consider the tactile interaction design and use the icons and buttons that are recognizable in mobile design. This makes the usability more efficient for the user.
The Iona Group employees joined a local Adopt-a-Family effort again this year. Grace Church in Morton was contacted last year by the Tazewell County Health Department regarding about 80 families in need. The church body responded to the opportunity and provided essentials, clothing, and gifts as an expression of Christ’s love. The Iona Group joined in as part of this outreach.
This year, the Tazewell County Health Department recommended to Grace Church over 120 families in our surrounding communities who are in need this Christmas. The Iona Group was assigned a large family of 10 to “adopt.” We asked employees to donate to this cause, and there was an overwhelming response. We split the employees into teams who each purchased items for one member of our adopted family. In addition, Iona agreed to match employee contributions, so there were additional funds spent to purchase “Pack ‘n Plays” for several other families on the list. This is a wonderful way to share our blessings with those less fortunate in our own communities.