Home

Microinteractions: Designing with Details

Presentation with Dan Saffer

Monday, 11:00AM – 11:45AMMTCC – 715

“The details are not the details. They make the design.” — Charles Eames

Microinteractions are contained product moments that revolve around a single use case. In other words, microinteractions have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.

…Even though we’re surrounded by microinteractions every day, we don’t usually notice them until something goes horribly wrong…but microinteractions are, despite their small size and near-invisibility, incredibly important. The difference between a product you love and a product you tolerate is often the microinteractions you have with it.

Microinteractions are the details of a product, and details, as Charles Eames famously said, aren’t just the details; they are the design. Details can make make engaging with the product easier, more pleasurable—even if we don’t remember them. Some microinteractions are practically or literally invisible, and few are the feature that you buy a product for (although many apps and devices are created around a single microinteraction; see Chapter X); instead, they are usually pieces of features, or the supporting or so-called “hygiene” features. For example, no one buys a mobile phone for the mute feature, but as we’ve seen, mute can create all sorts of experiences—for good and bad.

Think about it: Almost all operating systems, be they mobile or desktop, do basically the same things: install and launch applications, manage files, connect software to hardware, manage open applications/windows, etc. But the difference between operating systems—at least from a user’s perspective—are the microinteractions you have with it on a daily, even hourly, basis.

http://www.odannyboy.com/

http://microinteractions.com/

Don’t start from zero

Use what’s often overlooked

Health on the Go: Designing Electronic Health Records for Mobile

Presentation with Sweta Mohapatra

Electronic health records (EHRs) have been used to store patient data since the 1960’s, but the adoption rate in the United States is far behind other countries since physicians were and still are frustrated with the usability of these systems. With the introduction of the iPhone in 2007, the design opportunity for mobile EHRs was created, but as companies have started to build applications, many design questions around designing for mobile and healthcare are still in need of answers. This talk covers some of the lessons learnt from building mobile EHR applications, the types of design problems that need solving when designing an application based on desktop software, and the complexities of designing applications where patients’ lives are at stake

SLIDE 1 – EHR’s were developed in the late 60’s

IMG_4789
SLIDE 2 – Patient Safety and Privacy
– Porting from Desktop
– Designing mobil EHRs

If enabling everything on mobile, load 20% of the features , 80% of the timeIMG_4792

Privacy and Safety:
Physician must have confirmation that what they will do to the patient will not cause any harm to them, including safety and privacy

HIPPA   compliance

  1. applications must include session timeouts,
  2. Factor authentication

Look for the “meaningful use guildelines” book from the goverment for HIPPA compliance (for companies trying to build EHRs)

  • Keep in mind that Mobil is new
  • Understand how physicians use workflows (to improve the software for them)

Compliance : design to facilitate a healthcare service

Presentation with Audrey Richard-Laurent

How to connect patients to their illness and the medical staff, while complying to the constraints of patient management in the care system? This project, led at the Polyclinic Baudelaire (APHP Saint-Antoine) with Prof. Jacques Lebas, developed into tools to reduce uncertainty and facilitate decision-making. It aims to humanize communication tools to promote cooperation and understanding by becoming virtually invisible in the chain of care. Thus facilitating and improving interactions between patients, practitioners and the health care system. In this particular context, a designer has to reveal and create touchpoints by juggling with interaction design and information representation to enable a satisfying and efficient user experience, be it patient-wise or practitioner-wise. Due to the variety of user expectations, the whole design process had to be agile and versatile enough to enable updates on-the-fly without interruption and under constant evaluation. Eventually, the “design” has to completely vanish to make way for a flexible and appropriable service.

Worked for 6 months on a project for the Polyclinic in Paris

1st – Social barrier (language, paperwork)

APPROACH:
Individualized patient journey -One approach does not work the same for all

Created a graphical toolkit of stickers, paper, easy to reproduce. Using one row of many stickers for the patient’s whole visit

Patient fills this form, and keeps it for the whole visit and for themselves

IMG_4793

Create an unique experience, get out of our confort zone, mingle on the filed, collaborate, hands on

Empower people by giving them Decision-making tools

Driving Impact not Serving Shareholders: Lessons from the Non-Profit World

Presentation with Gretchen Anderson @gretared @greatschools

As an established non-profit in the education space, GreatSchools reaches almost half of America’s families in a year to help them get their kids a great education. We are fortunate to not have to answer to shareholders and a financial bottom line. But at the same time, maximizing profits is a clear goal, if not always a clear path that corporations have to focus on. This session will share the tools we use to orient our organization toward the impact we seek to achieve and how those in the for-profit space can benefit from their use too.

ACTIVITIES > ACTIONS > OUTCOMES > IMPACT

USER NEEDS
+                                  = IMPACT
OUR GOALS

Use impact to drive innovation

Bring a POV about impact not just experience

Measure impact not ust the bottom line

 

 

Innovation, Investment, Influence and Impact: design that fosters change

Presentation with Franco Papeschi

In the past 15 years, while designers were learning how to create products, services and interactions that guarantee a return on investment, the world of businesses was changing. Economic return is not the only measurement now for value-driven businesses, many start-ups, social enterprises, community-based organisations, NGOs and even for corporations. This upcoming economic model is focused on the impact that new products and service have on societies and economies. We, as designers, are not fully ready to plan and assess what impact our work will have on the users and customers we aim to engage. In this session, I’ll present an approach that goes beyond user-centred design and activity-centred design: impact-driven design. I will introduce some examples taken from my involvement in the creation of start-ups in different African countries, and I will introduce a series of tools and practices that would help Interaction Designers go beyond their remit of creating useful, usable and engaging experience, and create impactful services.

World wide web foundation
Design that foster Change
it is not about coding
it is about web development
Many failures, now refocusing on what they do, so they came up with “A framework”
“Theory of Change” – What impact do you want , and how do you get there…
An NGO should use on principle:
BEHAVIORAL MAPPING : Example – someone using skype to sell their products (drummer attaching info on drum for classes)
                    External factors      >>>>>>> Behaviors and assumptions
|—————————————————–|
ACTIONS > OUTPUTS > OUTCOMES > IMPACT ———-> CAPABILITIES
       V                    V                       V                     V
StoreAcorn     breakIce         bigCrack       destroyIcberg   ——-> from IceAge Movie
NGO’S METHODS:
Behavior Mapping, Build, measure and Monitor evaluation/ Logic
1.Behavior mapping: -actors that you need in order to achieve what you want
– Draw and write a representation of this goal
– Mark big behavirs and unknows within the map
2. Monitoring and Evaluation Logic:
Deivne indicators and measure them for before and after – need a baseline
3. Technology Probe: New use of a platform send different types of test and evaluate uts use
THEORY OF CHANGE
NEW AND OLD METHODS
MINUMUNM AND VIABLE INTERVENTION AND FRUGAL INNOVATION
FOLLOW NEW PATHS OF MONEY

Designing for Complexity: What Did I Get Myself Into?!

Presentation with Chris Pennell Jessica Bailey – NO TWITTER ACCOUNTS??

You’ve been assigned to design the future MRI scanning experience and you may be thinking to yourself, what did I get myself into?! This isn’t an everyday consumer experience – but a specialized, results-focused, and expert-user driven system. A product that doesn’t just have a “help” section, but 500+ page manuals and week-long training programs. A system that lives inside of, and is connected to, several other pre-existing processes and systems with many parts and pieces. In an ideal world, UX designers get to learn all about the people who use these types of systems – what they do, and why they do it – in order to design and redesign experiences that meet users’ needs. But what do we do when the information available is less than ideal? What issues and obstacles do designers face when trying to understand complex systems? What are some best practices for understanding these systems as a non-expert or non-practitioner? How can we get up to speed and really understand these systems to help our users find, understand, and process large sets of data? How do we engage our problem-solving skills as designers to make the right decisions? Even if you don’t have time, budget, or resources for research, you still have strategies you can use to help you through this process. We’ll discuss 5 coping strategies that we have used to help us solve for big, wicked problems.

FIVE STRATEGIES

1. DON’T FREAK OUT

2. THE THING IS NOT THE THING

3. BUILD AN UNDERSTANDING

4.KEEP BUILDING AN UNDERSTANDING

5. ZOOM OUT

Moving Past the Navbar

Presentation with Calvin Tennant

Is classical website navigation (ie: the navbar) is a cop-out used by designers to avoid having to apply a thorough content strategy, consider user goals and to guide direction? Newer design strategy (as often seen in the development & design of mobile applications) supports this thesis. With mobile design, designers are now focusing on goal-directed design as the limited screen space makes it difficult to employ older methods of interaction design. This presentation will address the shortcomings of the navbar and introduce alternate navigation methods. Examples will be provided to illustrate benefits of these alternate methods.

“Think about having context at every level of navigation”

Here is a copy verbatum of the presentation – it was read word by word…not to professional imho, could have done much better with the subject, because many of us agree, just not with this crammy presentation though.

SLIDE 2 

navbar_sample_linkedin_13-01-27If a discussion about you’re next project’s information architecture includes the question: “So, what’s going in the navbar?”, you’re doing it wrong.

I need to be clear: when I’m using the term navbar, I’m discussing the series of toggle buttons commonly presented at the top of a website that bring you to important internal pages.

Navbars have served the web-development community pretty well over the last fifteen years. With standard screen sizes they are still very popular, and often complete their goal of navigating the user quickly through the website. With more users using different screen sizes and devices, navbars are quickly starting to fail as an effective method of navigation. Here are some popular examples.

SLIDE 3

navbar_sample_amazon_13-01-27

Oversized navbars are a poor navigational solution because they require the ability to define the purpose of an endpoint, often without context, in one or two words. Context can often be provided by using a series of nested links that linearly classify you’re applications pages, but this is a band-aid solution that usually ends up providing too much information to the user, and complicating their decisions

SLIDE 4

navbar_separating-hyperplanes

Aside on linear classification, draw a line in the sand between two endpoints.

We all know that that’s not what the internet looks like.navbar_network_diagram

SLIDE 5

navbar_sample_ebay_13-01-27

So, what does the network look like? Depending on the types of information your product collects, it probably looks a lot like this. I hate to pick on Ebay, but let’s take another look there for a second. I’m willing to bet that there’s a lot of overlap going on between these categories. You can imagine a lot of products that belong in ‘Sporting goods’ also belong in ‘Toys & hobbies’. Now, that being said, I don’t exactly know what the navigational solution for Ebay is, but I don’t think top-down linear classification is working.

Here is what the presentation looked like 

SLIDE 6 This design pattern can often be replaced with a clever content strategy, and a few internal links. In situations where your product requires more complexity, you can often use a combination of contextual links and historical navigation. This style of navigation allows the user to discover the intricacies your information architecture, and gives you more control over their experience.see: twitter, explain that twitter's navbar consists of contextual links, explain twitter's sub-nav, draw similarities to iOS.

Depending on the size and complexity of your information architecture, a concise navbar can be an acceptable component of your navigation. A small number of distinct top-level endpoints can greatly simplify a complex system, but too many elements makes the complexity apparent and can cause confusion and frustration to the user.

Advertisements

One thought on “DAY 2- Monday – ixda13

  1. Pingback: ixda13 – Toronto, Canada | vivitoon

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s