UX Mobile Immersion Conference

UXIM 2014, Day 1

Let me first start by saying the UX Mobile Immersion Conference (@UX_Im) was by far the best conference I have ever been to. Focusing on user experience (UX) for mobile, this conference touched on everything from workflow, content and prototyping to coding, design and architecture. It was pretty eye opening to listen to speakers from all over the country, both from agencies like us here at Zion & Zion, and even some from the corporate world talk about UX from their personal points of view.

UXIM 2014 Denver, CO

This year, the UX Mobile Immersion Conference was held in Denver, CO. Lisa Murray and Raul Salido, two members of our UX and Web Development team here at Zion & Zion, and myself ventured to cold Denver (okay, maybe 70’s aren’t so cold for those of you not from Arizona) to attend the conference.

Downtown Denver, CO for UXIM

Downtown Denver, CO

Between the three of us, we figured we’d be able to take in as much information as possible and look at everything we learned from three different points of view: content, user experience, and development. We were right. The conference lasted three days. Day one was made up of three full day workshops, from which conference attendees were able to choose the one they wanted to attend. We chose Ben Callahan’s Workflow on Responsive Web Design Projects. Day two followed a more casual approach made up of four shorter sessions spread throughout the day. Finally, day three rounded out the conference, following the same structure of day one. We chose to attend Karen McGrane’s Adapt Your Content for Mobile workshop.

Ben Callahan’s Workflow on Responsive Web Design Projects

After participating in Ben Callahan’s (@bencallahan) full-day workshop and grabbing lunch with him and a few of his co-workers from his company Sparkbox on day three, I can personally say that Ben is an extremely bright, dedicated and kind person. His workshop started broad and got more and more detailed as the day went on.

Great lunch with Ben Callahan

Continued to pick Ben Callahan’s brain over an impromptu lunch

Spiral Workflow

While there were plenty of great takeaways from this workshop, the biggest takeaway we brought home with us was more of an idea than anything else. The idea that the responsive web design process should be spiral, not linear. When Ben explained the idea of a spiral workflow, he showed us a visual in which all of the different areas that are touched upon during the responsive web design process are laid out in a straight line. He then showed us a visual in which those same areas were laid out on a spiral. It was pretty obvious what he was getting at. In the linear example, every area was touched upon once, and then seemingly forgotten as the process moved forward. However, in the spiral visual, all of those areas were touched upon multiple times.

By following a spiral workflow rather than the typical linear workflow, everyone on the project is able to work together more easily and not feel forced to finalize their portion of the project before sending it off to the next department. Instead, we would work together on our specific tasks throughout the duration of the project, reducing the time spent on final revisions tremendously. To quote Ben Callahan:

“There is no one way to do this.”

Every agency is different, following different processes and structures, however the idea of following a spiral workflow is intriguing.

Workflow on RWD Projects by Ben Callahan Presentation

Brad Frost’s Atomic Design

Brad Frost (@brad_frost) spent the duration of his talk explaining (and in great detail, thankfully) Atomic Design. Atomic Design is the idea that an entire website is built similarly to the very planet we live on. The atoms make up molecules, which then make up organisms. In this metaphor, Brad Frost explained that the atoms to a website are things such as tags. A tag is extremely useful, however on its own, it doesn’t do anyone any good, just like atoms. Molecules would be things such as search fields and buttons. The atoms combine to make up these molecules. From here, the molecules then combine to make up the organisms. In this metaphor, the molecules combine to make up larger items such as headers and footers.

Sadly, the metaphor stops here, but the idea does not. From organisms, we can create templates and from templates we can create pages. Pages make up the website.

The atom is by far the most abstract, and as you move down the list, the items become more and more concrete.

Atomic design by Brad Frost Presentation

Slide 1:

ATOMIC DESIGN
@brad_frost

Slide 2: [image]

Slide 3: DESIGN SYSTEMS

Slide 4: [image]
Design Systems

Slide 5: [image]
Styleguides for the Web

Slide 6: [image]
Style Tiles
http://styletil.es

Slide 7: [image]

Slide 8: [image]

Slide 9: [image]

Slide 10: [image]
Our New Responsive design Deliverable: The Style Prototype

http://sparkbox.github.com/style-prototype/

Slide 11: [image]
Spark Box

Slide 12: COMPONENTS

Slide 13: We’re not designing pages, we’re designing systems of components.
– Stephen Hay

http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

Slide 14: WHAT IS AN INTERFACE MADE OF?

Slide 15: [image]
UI Patterns

Slide 16: [image]
Mobile Design Pattern Gallery

Slide 17: [image]
UI Parade

Slide 18: [image]
Responsive Patterns

http://bradfrost.github.com/this-is-responsive/patterns.html

Slide 19: FRAMEWORKS

Slide 20: [image]
Foundation, The most advanced responsive front-end framework in the world.

http://foundation.zurb.com

Slide 21: [image]
Bootstrap. Sleek, intuitive, and powerful front-end framework for faster and easier web development.

http://twitter.github.com/bootstrap/

Slide 22: THESE THINGS ARE GREAT, BUT . . .

Slide 23: FRAMEWORK POTENTIAL PITFALLS

– Subscribe to other developers’ structure/naming/style
– Lookalike issues
– One-size-fits-all
– Potential for bloat/unneeded stuff
– Might not do everything you need
– Ability to scale
– Compatibility with existing sites

Slide 24: Tiny Bootstraps, for every client.
– Dave Rupert

http://daverupert.com/2013/04/responsive-deliverables/

Slide 25: Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.
– Dave Rupert

http://daverupert.com/2013/04/responsive-deliverables/

Slide 26: PATTERN LIBRARIES

Slide 27: [image]
Front-end Style Guides

http://24ways.org/2011/front-end-style-guides/

Slide 28: BENEFITS OF FRONT-END STYLE GUIDES

– Easier to test
– Better workflow
– Shared vocabulary
– Useful reference

http://24ways.org/2011/front-end-style-guides/

Slide 29: [image]
Gimme Bar, Front end styleguides

http://gim.ie/fZyK

Slide 30: [image]
Pears are common patterns of markup & style

http://pea.rs/

Slide 31: [image]
http://brettjankord.com/projects/style-guide-boilerplate/

Slide 32: [image]
http://patternprimer.adactio.com/

Slide 33: [image]
Barebones, an initial directory setup, style guide and pattern primer

http://barebones.paulrobertlloyd.com

Slide 34: [image]
Barebones Style Guide

Slide 35: [image]
Barebones Pattern Primer

Slide 36: [image]
Barebones Form Example

Slide 37: [image]
Style Guide

http://www.starbucks.com/static/reference/styleguide/

Slide 38: [image]

Slide 39: [image]

Slide 40: [image]

Slide 41: I LOVE THESE.

Slide 42: MO’ PATTERNS, MO’ PROBLEMS

– Time consuming to create
– Treated as a auxiliary project
– Often created after a project launches
– Often too abstract
– Seen only as a designer/developer tool
– Often incomplete/only serving present classes
– Lacking a methodology

Slide 43: ATOMIC DESIGN

Slide 44: H2 + 02 → H20
C + 02 → CO2
CH4 + 02 → CO2 + H20
C8H18 + 02 → CO2 + H20
C2H6 + 02 → CO2 + H20

Slide 45: [image]

Slide 46: H2 + 02 → H20

Slide 47: [image]

Slide 48: [image]

Slide 49: [image]

Slide 50: [image]

Slide 51: [image]

Slide 52: [image]
Periodic Table of the Elements

http://joshduck.com/periodic-table.html

Slide 53: [image]

Slide 54: [image]

Slide 55: [image]

Slide 56: [image]

Slide 57: [image]

Slide 58: [image]

Slide 59: [image]

Slide 60: [image]

Slide 61: ATOMS

– Building blocks of an interface
– Can’t be broken down any further without losing their meaning
– Abstract
– Often not too useful on their own
– Good as an at-a-glance reference
– See all your global styles laid out at once

Slide 62: [image]

Slide 63: Actin’ fool breakin’ shit down to molecules
– Busta Rhymes

Slide 64: [image]

Slide 65: H2 + 02 → H20

Slide 66: [image]

Slide 67: [image]

Slide 68: MOLECULES

– Group of atoms bonded together
– Smallest fundamental units of a compound
– More concrete than atoms
– Encourage a “do one thing and do it well” philosophy
– Often serve as the backbone for a more complex system

Slide 69: [image]

Slide 70: [image]

Slide 71: [image]

Slide 72: [image]

Slide 73: ORGANISMS

– Group of molecules joined together to form a distinct section
– Complex molecules
– Can consist of similar and/or different molecule types
– Encourages creating standalone, portable, reusable components

Slide 74: [image]

Slide 75: [image]

Slide 76: [image]

Slide 77: [image]
Responsive Comping: Obtaining Signoff without Mockups

http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

Slide 78: [image]

Slide 79: [image]

Slide 80: TEMPLATES

– Page-level
– Mostly comprised of groups of organisms
– Begin their life as HTML wireframes, increase fidelity over time
– Client facing. Very concrete.
– Eventually becomes the deliverable/production code

Slide 81: [image]

Slide 82: [image]

Slide 83: [image]

Slide 84: PAGES

– Specific instance of a template
– Highest fidelity. Template content is replaced with real/sample content
– The hub for most people involved in the process.
– Test the effectiveness of the system
– Test variations in the template: design/content tweaks, include/exclude organisms, etc.

Slide 85: [image]

Slide 86: [image]

Slide 87: [image]

Slide 88: [image]

Slide 89: ATOMIC DESIGN

– Provides a methodology for crafting an effective design system
– Easily traverse from abstract to concrete
– Promotes consistency and cohesion
– Assembles rather than deconstructs

Slide 90: [image]

Slide 91: pattern lab
create design systems with atomic design

Slide 92: Pattern lab is a collection of tools to help create and maintain atomic web design systems.

Slide 93: WHAT PATTERN LAB IS

– A comprehensive component library
– A pattern starter kit
– A design system builder
– A practical viewport resizer
– A design annotation tool

Slide 94: WHAT PATTERN LAB ISN’T

– A UI framework
– Language/library/style dependent
– Incredibly rigid

Slide 95: [image]

Slide 96: Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.
– Dave Rupert

http://daverupert.com/2013/04/responsive-deliverables/

Slide 97: PATTERN BUILDER

Slide 98: [image]

Slide 99: [image]

Slide 100: [image]

Slide 101: [image]

Slide 102: [image]

Slide 103: [image]

Slide 104: [image]

Slide 105: [image]

Slide 106: [image]

Slide 107: [image]

Slide 108: [image]

Slide 109: [image]

Slide 110: [image]

Slide 111:

MOLECULE GUTS

<div class="block block-inset">
	<a href="#" class="inner">
	<div class="b-thumb">
		<?php inc('atom' , 'landscape') ?>
	</div>
	<div class="b-text">
		<h2 class="headline">Headline:
Lorem ipsum dolor sit amet,
consectetur adipiscing</h2>
	</div>
   </a>
 </div>

Slide 112:

BASIC INCLUDE

<?php inc('molecule' , 'pagination') ?>

Slide 113: [image]

Slide 114: [image]

Slide 115:

ORGANISM GUTS

<section class="comments section">
	<div class="comments-container" id="commets-container">
		<h2 class="section-title">59 Comments</h2>
		<?php inc ('molecule' , 'comment-form'); ?>
		<ul class="comment-list">
			<?php inc('molecule' , 'single-comment'); ?>
			<?php inc('molecule' , 'single-comment'); ?>
			<?php inc('molecule' , 'single-comment'); ?>
			<?php inc('molecule' , 'single-comment'); ?>
			<?php inc('molecule' , 'single-comment'); ?>
		</ul>
	</div>
	<?php inc('molecule' , 'pagination') ?>
</section>

Slide 116:

BASIC INCLUDE

<?php inc('organism' , 'comments') ?>

Slide 127: [image]

Slide 118: [image]

Slide 119: [image]

Slide 120: [image]

Slide 121:

TEMPLATE GUTS

<?php inc('organism' , 'header'); ?>
<div role="main">
	<div class="l-two-col">
		<div class="l-main">
			<article class="article">
				<header class="article-header">
					<h1>Article Headline Lorem ipsum dolor sit</h1>
					<?php inc('molecule' , 'byline-author-time') ?>
				</header>
				<?php inc('organism' , 'article-body') ?>
			</article><!--end .article-->
			<?php inc('molecule' , 'social-share') ?>
			<?php inc('organism' , 'comment-thread') ?>
		</div><!--end l-main-->

		<div class="l-sidebar">
			<?php inc('organism' , 'related-posts') ?>
			<?php inc('organism' , 'recent-tweets') ?>
		</div><!--end l-sidebar-->
	</div><!--end l-two-col-->
</div><!--End role=main-->
<?php inc('organism' , 'footer'); ?>

Slide 122: [image]

Slide 123: [image]

Slide 124: [image]

Slide 125: [image]

Slide 126: VIEWER

Slide 127: 320PX.

Slide 128:

320PX.
480PX.

Slide 129:

320PX.
480PX.
768PX.

Slide 130:

320PX.
480PX.
768PX.
1024PX.

Slide 133: [image]

Slide 134: [image]

Slide 135: [image]

Slide 136: [image]

Slide 137: [image]

Slide 138: [image]

Slide 139: DISCO MODE

Slide 140: [image]

Slide 141: HAY! MODE

Slide 142: Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
– Stephen Hay

http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

Slide 143: [image]

Slide 144: MANUAL

Slide 145: [image]

Slide 146: [image]

Slide 147: VIEW MODES

Slide 148: [image]

Slide 149: [image]

Slide 150: [image]

Slide 151: WHY PATTERN LAB

– Serves as a hub for the entire design process
– Useful tool for everyone: information architects, designers, developers, clients
– Can easily traverse from abstract to concrete
– Write HTML/CSS/JS as you please. Name things as you please.
– Start with a system rather than deconstruct later
– Encourages flexibility
– Document as you go

Slide 152: WHAT’S NEXT?

Slide 153: DAVE OLSEN
@dmolsen

Slide 154: [image]

Slide 155: Logic-less templates.

Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and for node.js.

Works great with TextMate, Vim, Emacs, and Coda.

The Manual: mustache(5) and mustache(1)

Demo

Slide 156: [image]

Slide 157: MINIMIZE DEPENDENCIES

Slide 158: MO LANGAUGES

Slide 159: [image]

Slide 160: [image]

Slide 161:

INCLUDES ARE INCLUDES

//PHP
<?php inc('molecule', 'pagination')?>

//Codekit
<!-- @import "m-pagination.kit" -->

//Hammer
<!-- @include _m-pagination.html -->

//Ruby (maybe, I don't know)
Load 'm-pagination.rb'

Slide 162: [image]

Slide 163:

HUGE THANK YOU

– Dave Olsen
– Dan Mall
– Josh Clark
– Jonathan Stark
– Jennifer Brook
– Anna Debenham
– Jeremy Keith
– Brett Jankord
– Paul Robert Lloyd
– Tyler Sticka
– Harry Roberts
– Dan Cederholm

Slide 164: [image]

Slide 165: [image]

Slide 166: [image]

Slide 167: [image]

Slide 168:

WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.

Slide 169: [image]

Slide 170: [image]

Slide 171: [image]

Slide 172:

WORK HARD.
DON’T BE AN ASSHOLE.
SHARE WHAT YOU KNOW.

Slide 173:

THANKS!
@brad_frost

Jason Grigsby’s Adapting to Different Forms of Input

Jason Grigsby’s (@grigs) session was all about different forms of input, and how we can adapt to meet the needs of any and all input types. An input is the form in which a user performs an action on a device. For instance, on the iPhone, the primary input is touch, however the iPhone also has the home button which is a click, and Siri, which is voice activated. These are all different forms of input that need to be addressed in the web development process.

Jason Grigsby went on to say:

“Input type is a bigger challenge than screen size.”

Additionally, input type will continue to become more and more of an importance as new technologies are created in years to come.

This was a really interesting talk; a bit different than the others we attended at the conference, however extremely enlightening. It forced all of us to think beyond what our current struggles are and reminded us that this is an ever-changing industry. Something that works perfectly today may be outdated a year from now. That is the industry we are in, and that cannot be forgotten.

Let me start out by saying we all loved Luke’s (@lukew) talk. He is funny, energetic and you can’t help but want to be his friend! Luke talked about his personal experience; where he started and how far he has come and compared that to the Internet; where it started and how far it has come. This really put into perspective just how young the Internet is and how much can change in such a short period of time. However, the biggest takeaway from Luke’s session came from one point he made halfway through his presentation. That point was:

“It can always get simpler.” – Luke Wroblewski

He used mobile apps for booking a hotel room as an example. One app required 40+ taps (on a touch screen) and nearly 100 seconds to book a hotel room, whereas the other app required only 4 taps and roughly 8 seconds of the user’s time. Can you guess which app was more successful? Yep, the simpler app. This can be applied to just about anything in our industry. From sign-up forms and receiving contact information, to downloading a brochure or making a purchase, the simpler the process is, the better it will convert.

Jared Spool’s How Do We Design Designers

 

Caffeine Boost for the Final Session of Day 2

Caffeine Boost for the Final Session of Day 2

The final session of day two equates to a necessary coffee run. These days are long, but boy are they entertaining! Jared Spool (@jmspool) is the CEO and Founding Principal of UIE (User Interface Engineering), a research, training and consulting firm that is behind UXIM and UIE conferences. As the keynote for the conference, Jared wanted to focus on something close to his heart, which is the future of our industry. And that starts with the students who are still in school.

Between being CEO of UIE and running various conferences throughout the year, Jared is somehow finding the time to start a school with Dr. Leslie Jensen-Inman, a designer and renowned UX expert. The school is called the Unicorn Institute and is designed to help create the next generation of UX experts that are so desperately needed. Jared spent the duration of his session discussing what it takes to be a true UX expert, and how we can work to ensure that the future generations fit into those requirements.

Karen McGrane’s Adapt Your Content for Mobile

Our final day consisted of a full-day workshop with the one and only Karen McGrane (@karenmcgrane). This was my first time hearing her speak and I was beyond excited to learn from the expert in Content Strategy. Her workshop focused on content for mobile and she didn’t waste any time diving deep into this topic.

We began by discussing the four mobile truths as defined by Karen McGrane:

  1. Content matters on mobile.
  2. Strive for content parity.
  3. It’s not strategy if you can’t maintain it.
  4. You don’t get to decide which device people use. They do.

All four of these truths are just that, truths. They are statements that we need to keep in the forefront of our minds at all times when planning and developing websites.

For me, the biggest takeaway here was #4. If you are in this industry, you know that screen size can no longer depict device type. A phone held landscape has a screen size similar to a small tablet held portrait. The new “phablets” have enormous screen sizes, making it near impossible to determine if users are really on a mobile phone or a tablet.

This brings us to Karen’s next big point. Just because a user is on a phone does not mean they are out walking on the go, only looking for a phone number or address. In fact,

“Device and screen size are not context.” – Karen McGrane

Personally, I can be found on my couch, watching TV with my laptop on the coffee table, iPad on the chair next to me, and iPhone in my hand. I have made purchases (on more than one occasion) from my laptop, iPad and iPhone. Screen size is not context.

Karen’s talk was enlightening to say the least. She made great points, had the proof to back up her claims, and was an excellent speaker. We cannot wait to hear what she has to say in the upcoming years.

Summary

All in all, UXIM was an amazing experience. We met great people, got to listen to true experts in our field talk about subjects they are passionate about, and came home with knowledge that our entire agency will benefit from. If you have the opportunity to attend in the future, I highly recommend registering for next year’s UXIM, wherever it may be held. You’ll be glad you did.

View of the Rockies and Downtown Denver, CO from Hotel

View of the Rockies and Downtown Denver, CO from Hotel