How Interactive Design Conference recap pt. 2

Friends, this recap post has been on the bottom of my to-do list for far too long. I’m so thankful that I took diligent notes because the sharpness of my memories and learnings has definitely faded. That being said, here’s what I learned on day two of the HOW Interactive Design Conference (view day one recap here.)

Session One: The Interdisciplinary Approach to Interactive Design

James Pannafino started us off challenging us to expand our language in order to understand web design. His lecture was an onslaught of vocabulary terms that we tried hard to copy down. All of this felt like really important information, but I was missing context for when you would use these terms and how they are incorporated into your work flow.

James told us there are three types of interaction: object to object, human to device, and human to human. Knowing what type of interaction you’re working with allows you to figure out the constraints. Constraints are everywhere but they shouldn’t limit your creativity. He made a good point that industrial designers know constraints all too well. With every object they design they have to know how to point out constraints and work with them.

Giving choices

James told us that giving too few or too many choices an influence whether or not people opt to choose at all. One choice, people don’t have anything to compare it too, but more than 4 or 5 and they don’t know how to compare. This relates to the Flow State Theory, which is to give people choices but allow for flow.

When displaying the information

When you’re displaying large bits of information, you must be mindful of Millers Magic #7 rule (memory can only hold up to 7 things in thought at one time) and if there is too much data in one area, a user can suffer from Hick’s Law (information overload). It is also important to realize that users do not read websites, they scan them. Use the chunking method (breaking related information into small groups) to allow users to scan for the keywords, making the process easier. Not only should you chunk your information, but minimize your cursor movement. This means that if you want them to jump from one chunk of information to a CTA (call to action), make sure the call to action is close to the chunk.

Here’s a really good article on Fitz’s Law

 James also gave his future predictions for the web:

1) The Web will become device agnostic: There will be interfaces on any object. We already begin to see this on home appliances like refrigerators and ovens.

2) Augmented Reality will play a bigger part

3) Sensory or Adaptive Displays


Session Two: Master Minding the Process

Chris Butler of Newfangled, author of the Strategic Web Designer, spoke on the importance of explaining your process to your client, so that they understand the expectations and commitments on the project. He said that selling design to a client doesn’t work, talking about it is too vague, talking about the outcomes is too difficult to project. The key is talking about the process.

How to Express Process: It’s about making commitments (decisions).

Plan > Design > Code

Chris gave us an outline on the Iterative Approach:

Mission : commitment to intent.
Answers: Who are you? What are you doing? For whom are you doing it? How will you do it?

Strategy : Your Content Marketing Plan, Your business objectives
Answers: The purpose

Discovery: Answers the critical questions on key objectives on HOW to carry out the strategy
Answers: What platforms/vehicles, the timeline

Information Architecture: Commitment to the user flow. (sketches > wireframes > prototype)
Answers: how the user will navigate your content.

Mood boards: A visual tool that includes visual elements, imagery, color palette
Answers: How the site will be styled (the sites branding)

Visual Design: Finally after all the previous “phases” have been approved, we design. It’s a commitment to the visual representation of all the steps so far.

Production: Commitment to build and implement the visual design into a functioning website.

QA: Quality Assurance. Providing feedback and testing.

Post Production Edits: Commitment to fixes and alterations.

It is important to explain to clients that every phase must be fully developed and approved (committed to) before continuing the next phase because it sets the foundation for the following phases. If a client were to change their mind, it would require not only making the changes in the current phase, but going back and addressing where it changed in the previous ones, costing more time and money and possibly offsetting the timeline.

[The process] is about making commitments.

[Conversion comes from engagement, not from seduction]

[Design is not a property to be seen, but to be known]

Session Three: Making meaning in Content and Design

Content Strategy has become a hot topic in the last few years and I’m so glad Margot Bloomstein was able to shed some light on it.

One of the main takeaways from her lecture was before starting a redesign or even a new website you must do these things:

Define the communication goals: If you don’t know what you need to communicate, how will you know if you succeed?

Define the Message Architecture: The hierarchy of your communication goals. This drives the cohesiveness of the user experience.

Use the card sorting technique with a client: Put a word on each card and have the client divide up into three piles.
1) Who are you? 2) Who you’re not 3) Who you’d like to be.

Present back your Message Architecture before you create comps. This saves on the budget and gives us a place to go back to and point at when clients change their direction.

Lastly do a Content Audit on current site:
What content is aligned with the Information Architecture? What doesn’t?

Suggest re-structuring based off findings.


Session Four: Prototyping tools

This session turned out exactly how it sounds: a list of tools that Todd Zacki Warfel uses when prototyping.

Pop App – Sketch out your wires, photograph with your phone, and make it a clickable prototype with the app.

Screen Shot 2013-12-03 at 8.01.55 AM

Invision App – easiest tool that is browser based. Export assets to folder, start project, drag folder, send URL to people.

Screen Shot 2013-12-03 at 8.03.14 AM

Flinto – Export comps to folder, launches like a native app.

Screen Shot 2013-12-03 at 8.03.41 AM

Sketch – The favorite so far. Has custom art board types, has grids, export feature can also export at 2X or 1/2 the size at same time for responsive design.

Screen Shot 2013-12-03 at 8.04.06 AM

Skala preview

Screen Shot 2013-12-03 at 8.04.38 AM

Adobe Edge Inspect – pull things up on phone and inspect the code.

Screen Shot 2013-12-03 at 8.06.03 AM

Session Five : Adobe Muse Demo

Next we saw a live demo of Adobe Muse with Terry White, one of the Adobe TV educators. For those of you who are unfamiliar with Muse, it’s a new(ish) software by adobe for designers who want to build websites, but don’t know code.I say newish because I used the beta over 2 years ago to create Jeremy Widen’s website re-design. I didn’t take any notes for this lecture because to be perfectly honest, I don’t like Muse.

When I first started using Muse, I thought it was great. When I heard I could make websites all on my own without having to code or pay a developer I thought it was going to solve all my problems. The interface is similar to indesign, making it feel familiar and just comfortable enough. What I soon learned was that it was a pain in the butt to work with. At that time, there were still a lot of glitches, but what annoyed me the most was that you had to export the entire site to make any changes. After a year of futzing with the software I gave up and re-designed Jeremy Widen‘s site with WordPress.

After watching Terry White’s demo of the full version, I will admit that it has improved somewhat from when I used it. It has new features and fixes to some of the bug problems I had experienced.

Here are some pros and cons I’ve noticed:

– easy to use for designers that don’t want to code
– has a bunch of interactive features like slide shows and parallax scrolling
– great for static informational sites

– not as robust as a CMS. This means you can’t do e-commerce or blogs (anything with dynamic content)
– the code WAS terrible. I haven’t seen it now, but I still don’t think a machine is capable of creating perfect code.
– The exported .html file is still not updatable. You have to edit the working file (muse file) if you need to make edits. Muse can not read the .html file. (it’s like trying to edit a jpg once you save it from a psd. If you want to make edits, you have to edit the psd).

Here’s the basic takeaway. Muse is NOT the save all solution to making websites for designers who don’t want to code. It can not replace a developer, and shouldn’t. I suggest you use it as a prototype or for the basic “frame” of the site. Export the site and give it to a developer to flesh out and make more dynamic.

Here’s a really good article on why Muse still isn’t the best option.

Session 6:  Visual Execution of Branding Across Platforms

By the time Cameron Moll started to speak, my brain was about ready to explode with information and I think the entire audience felt the same. So what did Cameron do? He opened with a hilarious video of his son. I can’t remember exactly what his son did that made us laugh (I think he fell down trying to make a basket), but what I do remember is the sudden shift in the audience. It was like everyone took a breath, laughed and then relaxed.

Cameron’s main message was this: The device is just a window to the experience, meaning people use them interchangeably and sometimes at the same time. The choice of which device to use has more to do with proximity than anything else, so what we must do is make sure the experience on ALL of those divices is cohesive. Here are a few of his do’s and don’ts:

“The device is just a window to the experience”

[do’s and donut’s}


And so concludes my recap on day two of the HOW Interactive Design Conference.

View Part one here.



1 Comment