Like a Pro(totyper): Prototyping for Lean UX

sandchi

Like a Pro(totyper): Prototyping for Lean UX

I am pleased to be on a panel discussing one of my favorite topics, prototyping! Here are the details about the event:

Wednesday, October 29, 2014
6:00 PM to 8:30 PM
The Creative Group
4225 Executive Square, Suite 300, San Diego, CA

Happy October, UXers! We hope you’re keeping your cool during summer’s last stand, and maybe vacationing someplace where the leaves do that thing that leaves are supposed to do this time of year.

This month, we’re proud to offer up a panel of professional prototypers. These designers do prototyping in their daily work, either as their primary role or a fundamental part of their process. They often work within lean UX teams to design and test in collaboration with more traditional UXers. You’ll get to pick their brains, learn more about prototyping as a methodology and deliverable, and get advice on how to incorporate the practice into your own work.

This idea came from our Intuit lab tour event — which hey, by the way, thanks for attending! — where we heard a lot of feedback from folks who wanted to know more about the UX prototyper role that Intuit hires for. You’re smart cookies to be curious: prototyping is a hot topic these days, steadily gaining traction in design circles, and sometimes even replacing wireframes and mockups as a main deliverable. And since caring for our community is the name of our game, we wanted to throw together a little something to help you learn more about it.

We rounded up an awesome group of designers to make this possible, including:
Hooman Anvar
Principal, Hooman Anvar User Experience Design and Strategy

Adam Armstead
Senior Interaction Designer, Intuit, former Design Manager at TakeLessons

Elina Kim
Experience Design Prototyper, Intuit

Heather Daggett
Senior Experience Design Prototyper, Intuit

Chris Griffith
Staff Engineer, Qualcomm UX

And our shiny new president, Paul Hong, as moderator.

Beverages and light appetizers will be served.

RSVP now to ensure you get to attend!

Park in the 4225 parking structure just across Executive Square from the 4225 building. Your parking will be validated.

Creative Coding: Front End Design & Development with Brackets

At the recent Adobe MAX conference, Peter Flynn (@knownissues), one of the engineers on the Brackets team gave a great talk entitled “Creative Coding: Front End Design & Development with Brackets“. Toward the end of his talk he covered some of the great extensions that are available:

Emmet (https://github.com/emmetio/brackets-emmet)

Quick Markup (https://github.com/redmunds/brackets-quick-markup)

Brackets Snippets (https://github.com/jrowny/brackets-snippets)

Everyscrub (https://github.com/peterflynn/everyscrub)

SVG Preview (https://github.com/peterflynn/svg-preview)

DevDocs Viewer (https://github.com/gruehle/dev-docs-viewer)

CanIUse (https://github.com/cfjedimaster/brackets-caniuse)

Response (https://github.com/kidwm/brackets-response)

Brackets Git (https://github.com/zaggino/brackets-git)

Brackets SASS (https://github.com/jasonsanjose/brackets-sass)

LESS AutoCompile (https://github.com/jdiehl/brackets-less-autocompile)

and of course if you happen to be doing jQuery Mobile development with Brackets, please feel free to get my extension from http://jqmbrackets.org/

PhoneGap Development Mistakes and How to Avoid Them

Recently I have downloaded a few applications that were built using PhoneGap/Cordova and I was shocked at their poor quality. What was shocking about them, was these errors were actually fairly simple to solve if the developers took just a little bit of time. I am not going to name the apps publicly, but let me outline the issues and their solutions.

Custom Splash Screens

Default PhoneGap Splash Screen

One of the first thing a user sees when they launch an application is the splash screen. By default if you use the PhoneGap Command Line Interface (CLI), it will auto generate a collection of default splash screens and icons, like this one.

It is a fairly straight forward process to replace this assets with your splash screen. You do need to make multiple variations to support the wide range of device screens and orientations.

The simplest method is to just overwrite the sample files with your assets. But you can just as easily go into the proper config.xml file and the changes there.

In fact, that was one of the driving reasons I created ConfiGAP for PhoneGap Build in order to assist that process.

I was also surprised that the application made it through the Apple App Store approval process. Yes it met the requirement to have a splash screen, but you would think the gatekeepers would have flagged it.

Holly Schinsky has a nice blog post outlining all the variations of Icons and Splash Screens as well.

Network Access

In another application, I decided to run a simple test. Would the app still function if my device is in Airplane Mode? The reason behind this test was that this app was a companion application to a major technology conference. If you have been to any tech conference you know that connectivity is always an issue. A great way to check your application for this type of use case is to enable Airplane Mode and see how it handles it. So, what happened in this case?

Well, the app launched, and then sat there trying to connect to some remote server, forever. After several minutes, I closed the app. If you make use of ANY network based data or services, you have to check that you have access to the network.

PhoneGap has the Connection API (also known as the Network Information API) which makes this very simple to do. First, this API can identify the type of network you are using. You can leverage this information to estimate the rough data speed you might get and handle the user experience accordingly. This API will call??? send Online/Offline events, so you can respond to the device losing its network access.

In the case of this app, it should have done a simple API call to see if the network was available for locking up the app in a failed attempt to access the schedule serve

Remote Assets

One of the challenges of mobile app development is the approval process for submission into some app stores. This can be at odds with with development time, especially of you are working toward a fixed date (like a conference). One solution is to display the content as an externally hosted web page and use the In App Browser plug-in. If you are not familiar with this Plug-In, it enables another webview to be opened so you can show additional HTML content.

The developers of this conference app chose to use this solution to display their conference maps. Of course this is the issue that I spoke of before regarding “what if there is no network?”, but the issue here is that In App Browser is not the nicest container for the content. The maps were shown, but with an URL address bar (filled with some long content management system type URL) and some unclear user interface controls. The screen no longer looked like the app that I was just using. Probably not the best user experience for a feature that will be fairly well used.

Instead, the developers should have leveraged the File API, allowing one to download and create local files on the mobile device. After properly checking for network status, they could have downloaded the latest maps onto the device, and referenced them locally in their application to create a better user experience.

Disabling the Web Bounce Effect

Another classic mistake when working with PhoneGap is remembering to disable the web bounce effect. If you are not familiar with this, when you scrolling your content in a web view, when the user reaches the top or bottom, the web view will indicate it has reached that point by bouncing or flashing. This is something that screams web app and really makes the app look poorly developed.

To stop this effect, you simply need to add a few elements to your config.xml file:

If you are using it for Android, then use

<preference name="disallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />

And for IOS, use like

<preference name="DisallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />

Reviewing on Device

One of the last things to look at is the actual text. I was amazed at how small the text appeared was in the app across multiple devices and it was really poor. I was wondering if the developers actually spent time looking and using their application on a mobile device, or did they just stay on their desktops and using emulators/simulators?

One fundamental rule of mobile development is you have to get it on-device. Now this can be slow and cumbersome (creating signing certificates, installing provisioning profiles, developer settings configured correctly), but the new PhoneGap Developer App can reduce that friction greatly. If you are not familiar with the new tool, it is a free app available for iOS, Android and Window Phone, which allows you to have your local PhoneGap application to run within this on-device shell application. It pretty sweet. Save your file, use the PhoneGap CLI, and run your app on-device as it would truly run. There is no excuse for not seeing your app on a device and ensuring it looks good.

Summary

Hopefully, you have added a few things to your checklist when developing your next PhoneGap application. The platform can do some amazing things, but it does require some extra attention to a few items to help make your apps shine. If you have other lessons learned, please feel to drop me a note.

Adobe MAX Keynotes

maxOnline

If you can’t attend Adobe MAX in Los Angeles this year, you can sign up to watch the Adobe MAX 2014 keynotes live from Nokia Theatre L.A. LIVE on Monday, October 6, and Tuesday, October 7.

Day 1 keynote

Creativity on the Cutting Edge
Monday, Oct 6, 9:30–11:30am PT

Creativity is no longer confined to the desktop—you want to work across devices and between desktop and mobile. Join Adobe leaders as we unveil new, connected applications, services, and hardware that empower the creative community to stay on the cutting edge—wherever and however you want to work.

Day 2 keynote

Community Inspires Creativity
Tuesday, Oct 7, 10–11:30am PT

Join David Wadhwani, Adobe SVP and GM of Digital Media, as he welcomes some incredibly creative minds to explore how they foster creativity and approach their work. Hear from Lee Hirsch, an award-winning documentary filmmaker; Ami Vitale, a National Geographic photographer; and Jason Seiler, a character illustrator. You’ll walk away inspired—and with more than a few new ideas to incorporate into your next creative project.

The url to sign up is: https://max.adobe.com/sessions/max-online/

Thoughts on Adobe Creative Cloud 2014…

adobe_creative_cloud_feature

It has been a few weeks since the release of Creative Cloud 2014, and have had a chance to fully integrate the various apps into my daily workflow. As with any new tools, it takes a bit to get used to the changes and to discover how the new features work.

icon-48.fp-5541debeb12c469a693561461388d45aLet’s start with the big guy, Photoshop. Now not really a new feature for Creative Cloud 2014 release, but the Generator functionality that was added after the initial Creative Cloud release is still my feature (hey, my review, my rules). As a prototyper, I often get my visual assets is various states of development. Being able to quickly generate the assets I need, in the formats I need is great time saver.

I also love seeing how the team has integrated the TypeKit service into Photoshop as well. Now I can open my designer’s PSDs and be able to access the typography they have chosen. I may have good collection of fonts on my machine, but it no match to my designer’s collection.

The last feature that I have found useful in my workflow is the improvement to Layer Comps. Developing mobile user interfaces means handling a variety of screens sizes and orientations. While not perfect for this, we are finding that we can use this to better group the user interfaces together.

icon-48.fp-289fc33f826f0284f3ac2ed0a7c722fbMy Illustrator skills are not nearly as strong as they should be. So having the new ability to help me close my paths has been great. I always had trouble keeping my work “on pixel”, often I would find once my work was rasterized, there was more anti-aliasing than I expected. Illustrator can now also snap the anchor points to pixel, grid or point. Also, they have done some nice work on working with anchor points. I think I can really start to use Illustrator as my drawing tool, rather than just working with designs given to me by my visual designers. Since I am also starting to use more and more SVGs in both my web and mobile development, I am sure I will be seeing that pen tool more and more.

icon-48.fp-ab5d905480c4975a4711aed4fe027db6Speaking of web development, Dreamweaver got a few nice touches as well. I must confess, most of my day to day web development is done using Brackets. But there are times when I need to open a competed web page to work with. In those cases I often do launch Dreamweaver. I was pleased to see some of the new inspectors, the element quick view has been useful when working on a complex DOM, and attempting to see the structure. I also like the live view property inspector that has been added. It is nice to be able to poke around and see what is being applied to an element. That is one thing that interrupts my workflow with Brackets, is pulling up the Chrome Inspector and losing the live refresh link with the page.

I also do a fair amount of teaching new developers web technologies, and it nice to see that the CSS that Dreamweaver is producing is clean, and the new visual editing tools can really assist your development workflow.

icon-48.fp-7aee161e34391878452392f6f08b7725I wrote about some of the new improvements to Flash in a previous post. In short, Flash is returning to its roots as a premiere animation solution. We can now publish to HTML5 via the create.js library or through WebGL. In fact, the team brought back the motion editor that has removed in Flash Professional CC. Another nice addition to Flash is the ability to export SVGs.

icon-48.fp-e2933b90285ca810d1d6c2eac1e9534eThe last tool that I have been experimenting with is Adobe Muse. We are always looking for ways to shorten our prototyping cycle. Although are some interesting tools in the prototyping space, due to various reason we are not allowed to use them. So I decided to take another look at Adobe Muse in this release to see it might assist us. There were several under the hood changes that really made a difference, the two most noticeable is the fact it has been completely rebuilt with 64-bit support. The sluggishness that existed in previous versions is now a distant memory. The app also now supports HiDPI screens (and if you like a dark UI). Doubt I will use Muse as part of my production workflow, but I think we can leverage its easy to use features to quickly mockup and prototype with.

I am really enjoying the improvements to my workflow by using the 2014 release of Creative Cloud. Let me know what features are helping your workflow.

 

AppaloozaLA!

AppaloozaLA

I had to miss speaking at the one in San Francisco, but I am back in the saddle to speak at the Los Angeles stop! This is going to be a great event filled with some incredible speakers. Personally, I will be presenting on using PhoneGap Build to quickly build native mobile applications.

The event will be on Saturday, November 15, 2014 from 9:00 AM to 5:00 PM (PST) at the Art Institute of CA-Los Angeles.

For more information, visit the EventBrite page. Hope to see you there!

 

jQuery 2.0 Development Cookbook

jQuery 2.0 Development Cookbook The problem with frameworks that have been around for sometime, is you have to be careful of the solutions that might exist for a particular problem you might be having. jQuery is certainly one of those frameworks that has a long legacy. The jQuery 2.0 Development Cookbook aims to solve some of these issue by collection a nice set of solutions to many standard problems using the newer 2.x branch of jQuery.

Leon Revill takes the reader from some of the more basic solutions, such as standard DOM manipulations, through more and more advanced solutions. The later chapters of the book being to touch on the basics of both jQuery UI and jQuery Mobile.

One issue I did have with the book is the author did spend a modest amount of time covering some server side portions. I appreciated the effort to introduce the reader to some more topics, but wish the he had just pointed the solution. I also would have like to have seen more advanced recipes that really show the capabilities of using jQuery

Overall, found the book useful as a traditional reference for working with jQuery 2. New developer to the jQuery framework will find this reference useful, and intermediate developer might pick up a trick or two as well.

(Disclaimer: The publisher supplied a copy for review)