Fred opens by saying it’s time to nut up, He also admits that he loves prototyping, and can’t think of a situation where prototyping can’t help your design.

As designers, we’re not making solutions, we’re making hypotheses, and building towards a solution. So the process of design — prototyping is key. You need to be an effective communicator and experimenter.

But it doesn’t matter what tool you use. as long as you go through the prototyping.

Fred uses Axure in this case for Design For Health. He’ll talk about where Axure helped him, and where it bit him in the butt.

At Evantage, they start with the business, and really, in UX design, it’s all about meeting the business goals.

Fred keeps saying that he’s “Not a sexy thinker,” but I think people want to think of him as sexy he says it so much.

He tries to imagine what the users want and sketch for that. He went through 14 sketches with pen and paper to find a flow that he liked. If he did that with Axure, he would have been killed.

He’s doing more modular sketching in components, much like Nathan Curtis does at 8shapes.

He started sketching the interaction flow, again, with pen and paper because he needed to keep revising fast and repeatedly.

Define scenarios and test plan

You don’t have to have real content, but you do have to have realistic content. It helps you test comprehension a little better. But you do need to have a sense of what kind of content is going in.

Structuring a prototype in Axure:
Start with a grid – master so it’s reusable throughout the prototype.
page template custom widget
create pages

Wireframes:
1. Make the wireframe
2. Make it interactive — which is great in axure

Don’t forget, prototyping lets you take bigger risks.

He added a function showing someone very close to being funded, to try and encourage some user to donate and put it over the top. But he has no idea if it’s going to work until he tests the protoype. Now he’s showing some video of him in Axure making the prototype interactive, and allow for real testing in key interactions.

Proof of concept testing

where the benefits of taking the risks are understood and realized.

Prototype only key interactions
Strip test plans to key tasks
run quick tests
Fix what sucks
Retest

Comprehensive testing:

1. Proto. only what’s needed for test and isn’t in your Proof of Concept Prototype
2. Then two rounds of testing to make sure your fixes are actually fixed
3. Make a report. Yes, go through and tell the story to all the different team members can know what is up.

Visual design:
Visual design is an opportunity for your design to evolve. It is not simply refinement.

He makes sure that the designer has all the info, and the context of the decisions that he made going to that point. It’s not about right or wrong. It’s about getting to a better place.

You can’t have babies, you can’t get attached to the project or the design.

Collaborate, don’t dictate to visual designers. Let visual designers take risks, too.

Fred now talking through his video, about how the brain takes in stuff, and craps out ideas.

Take the time to properly set up your prototype. It saves much time and hassle all the way through the project.

Now Fred hands over the mic to Will Evans

Will starts with his conceptual model mapping every possible activity and their interrelationships. He doesn’t have a set process at all, he has a whole range of activities that are employed depending on the client and the needs.

Then he gets into sketching and wireframing.

Many people like to sell on a process. But selling repeatable process is a fallacy. Measure twice, cut once, like a circumcision.

He uses design studio to gather requirements. With the stakeholders in the room, they can sketch, iterate and present their ideas to find out what is important to them.

One of the big things is that it allows people across the company to collaborate. By the time to present a wireframe, they can identify themselves inside the design, and keeps any stakeholder from having too much input in a process based on politics.

Personas
Measure 3x and cut once. Users lie. They don’t want to admit certain truths due to embarassment. Use contextual inquiry or ethnographic study where you can observe.

Functional sitemaps, then sketching Wireflows — which are basically storyboards of the Web experience.

Get into the mind of the user and try to build around the story of how the user wants to accomplish a task.

Sketching Wireframes
He’s able to create many different concepts quickly, a transformative act of working through problems.

Don’t go right from requirements analysis right into a tool. Free yourself from the tools and do basic sketches first.

Keep the sketches quick and dirty. Restrict your time doing this. Iterate through the screens many times.

Wireframes are a thinking device for exploration of the problem space. He recommends Omnigraffle.

ugh. Honestly, in making Will’s video, I’ve seen this so much I’m gonna stop blogging it. You can just see the video:

Related posts:

1. Video: The Right Way To Wireframe Yesterday, I helped get Will Evans ready for IXD10 by...
2. SXSW Live: Creative Collaboration: Building Web Apps Together Damn this SXSW ballroom A Wi-Fi! It’s holding me back,...
3. SXSW Live: Startup Metrics for Pirates: AARRR Note — postgame commentary added for this panel here A...

To expand on the description in the panel picker where you can give us a push forward with a thumbs-up, here are a few of the concepts we’ll be discussing:

Circular Narrative in Film and Web

You may have taken your children to see a great recent example of circular narrative in the newly released “Shorts.” We see, and have always depended on “classic” or “3-act” narrative to tell stories. This narrative structure is the way all stories are essentially told: with a beginning, middle, and end. Typically, classic narrative starts at the beginning of a time line and moves the audience through a linear accounting of the events.

However, Circular narrative does something a little bit differently: it uses the different characters’ perspectives to tell the story, and typically does so in a non-linear time line. In Citizen Kane, the storyline starts after Kane dies. In Pulp Fiction, the movie starts with a scene in a diner, which in a linear time line would take place 3/4 of the way through the story.

Any of this sound familiar? With every iteration of social networking sites, people’s experience on the Web is becoming more like circular narrative every day, with a central piece of content that is shaped through the lenses of comments and sharing. People who are using these sites are creating their own beginnings, middles, and ends. As Website creators, it’s important to understand these dynamics, and take these lessons into creating sites.

Common-engine Technology

Circular narrative also has technical roots, which we’re calling “Common-engine technology.” Basically, a single database that serves up content and interfaces dynamically according to the needs and perceptions of the audience.

I started working in this in ecommerce way back in 1998, where we would serve up different “storefronts” that rearranged products, prices, and design based on brand.  So if “store A” is a price-based brand, the audience is seeing a selection of products designed and ordered around price. If “store B” is a brand known for brand and caters to an audience that is less about price, the interface can be drawn to start at the brand level.

Common-engine technology offers audiences an experience that meets them at their own needs and perceptions, and offers companies a scalable methodology for serving site experiences that achieve business goals more successfully and efficiently.

Recently, we created the Miller ServerSpeak platform with a common-engine framework depending on what kind of bar the visitor works in. This puts the content an the interface into a familiar framework, giving visitors an immediate comfort level and allowing them to dive right into the experience.

In film, this presentation of objects that have meaning on the stage and in time is referred to as mise en scene, and will eventually be a blog post unto itself.

Master-scene format and mental models

One facet that Websites and films have in common is that the space people are immersed in is artificial construct created to mimic our perceived worlds. In both cases, we rely on visual cues to tell us how time and space are defined.

In film, this is done in master-scene format. First, a wide shot of the entire area in which the action takes place. This sets our expectation and understanding of space. If the action happens in an apartment, it’s typical to start with the characters talking while we’re being shown a shot of the entire building, followed by a medium shot that shows the characters in place in the apartment, followed by close-ups of each character in the scene. While this sequence can be shot over days or weeks, and out of order, it is presented to the viewer in a way that continually shows the boundaries of the perceived physical space while revealing new information that propels the story.

Good Web experiences work the same way using Information Architecture, Design, and content strategy. Through a number of devices, whether it be bread crumb navigation, chunking content, and ordering pages to be quickly scanned and clicked through, the placement of these elements for interaction should also always keep users aware of “where they are” and “where they’re going” in the perceived world of the Website, since it has no physical volume like tangible objects (think books) that are always subtly cluing us in on where we are in a real, physical space or object exploration.

By designing with these constructs in mind, we can ultimately create an experience that manipulates perceptions of time and space: to bring more immersion to the table. Getting “sucked in” to a film or a Website is a product of this effective manipulation, along with direction and editing techniques like matched action.

Experience Themes

With all this theory floating around, the natural next question is “How do you do it?” Luckily, Cindy has created a process called Experience Themes that draws from screenwriting to create a process that aligns the people working on a Website to  develop the main themes for visitors, and builds the experience around those central ideas. She also has a presentation solely dedicated to the topic that is also worth your thumbs-up on the SXSW panel picker.

In this panel, we’ll be showing the high-level approach to making experience themes specifically related to the ways screenwriters go through the process of creating the story, characters, and outline of their script. Here’s her Experience Theme presentation from the IA summit to give you a feeling of just how interesting and deep this goes:

Hopefully, this gives you a better idea of the topics we’ll be covering in our panel. You’ve gotten this far, now you should help us get to the dais by thumbing-up our SXSW panel on How Screenwriting and Film Theory Creates Enchanting Websites.

But let’s not limit this to this one panel presentation. Please contribute your ideas here in the comment section, or on Twitter @mleis and @cchasitain.

No related posts.