SlideShare a Scribd company logo
Coping with Complexity
Memi Beltrame
WIAD Switzerland - Zürich, February 21. 2015
Memi Beltrame
I make things fun
and easy to use.
I run a small company called less a mess and I specialize in research and prototyping for projects
with a high level of complexity. I am also the author of Protostrap, a tool to build clickable
prototypes.
We love Complex THings
https://flic.kr/p/9G71KC
I absolutely love complex things. We all do. We want challenges!

These challenges are driven by complexity.
more plates than we can spin
Often Complexity is really overwhelming and paralizing, too much of everything.
We are just not prepared to cope with it.
Coping with complexity
This talk is about what I learned on coping with complexity as a User experience professional.

I hope it will help you in being more prepared next time something complex shows up.
Complexity
https://flic.kr/p/cFM3cd
There are a number of type of complexity in our field. Complexity can be organizational, political or structural
and probably it’s always a combination of those.
Today I will focus on complexity that is tied to what we can see and do on the webpages themselves.
Tech based complexity
Responsive Design
Mobile First
Multi-Device Ready
Complexity in Web-Interfaces also has a lot of dimensions. Often it is only perceived on the
technical level, dealing with devices and display. The answers to those problems are mobile first
and responsive design, multi-device ready and so forth. These approaches are all fine. But they are
incomplete.
Tech based complexity
Focus on delivery
The problem with these approaches is that they focus on the delivery of content. The
content itself is secondary. As an industry we have started to realize that real content is
preferred to lorem ipsum. But still: the focus lies on the delivery, and not on the content
itself with all its dimensions.
Data is the key
Designing for digital media is more than handling the delivery by adapting to devices. Digital media must
adapt to individual user roles, needs and behavior. The key to a flexible adaptation is data.
https://www.flickr.com/photos/jdhancock/8031897271
Dimensions of complexity
- The amount of data to be displayed
- The data’s structure
- The process of how the data is created & edited
- Searching & filtering data
- How data changes over time
The interesting dimensions of complexity all have to deal with data
If you want to understand complexity you
have to understand data and its function.
actions user can do with data
- Read
- Enter new data
- Edit & change existing data
- Delete data
- Undo what they just deleted
- Search & Filter data
- Combine data
This is the data driven design approach. The point is to simulate everything that can be done with data. 

This is a list of very basic actions user can do with data.
Case study
I want to explore some of these dimensions with a case study of a project I was
fortunate enough to be part of,
SpotMe
The project is called SpotMe. SpotMe is a mobile app for large scale events. These events are medical
congresses or conventions for the tourist industry. Think big. 

The SpotMe app allows participants to see the program of the sessions, to interact with other participants or
take part in live surveys happening during sessions.

As an event organizer you can purchase your branded SpotMe app tailored to your event.
My part in the project was to help SpotMe team with the design of an administration tool for the events. This
tool, called Backstage, allows event organizers to manage all the data that is part of the event. This is the
participants, the agenda and the locations and much more.
First Morning, before coffee.
What is interesting about SpotMe is the size of it all.

The events that SpotMe accommodates have thousands of participants and an enormous amount of
parallel sessions. Some sessions contain nested sessions for example in the case this symposium inside
a conference that consists of several talks with work from different authors.
Where do I start?
So where do I begin to solve the problem?

I find the problem first.
Content inventory and oBject Model
It’s always a good idea to get an overview of the content we have to deal with. A high level content
inventory is a good place to start. For spotme this took the form of a Content object model. I listed
Content Objects and their types for each Topic I could find in the app.
scenariosResearch
I then used the list to go through each type of content to find out what tasks users had to be able to fulfill in
backstage. This gave me a huge backlog of tasks and made clear where the huge challenges were.
80 Columns - 5000 Rows
ENter: The Bad GUy
One of the biggest challenges was this one. This is the excel sheet that contains participants of an event. 

As you can see it is very incomplete and but it shows the dimensions. 

Handling the data of these super-sized events is a messy affair.
THe excel Nightmare
• No single point of entry
• No designated person
• No content strategy know-how
• No established workflows
• No reason to change
At this scale it is impossible to have a single point of entry or a designated person to deal with the
data. These companies also don’t know much about content strategy and there are no established
workflows for the governance of content.

To make things worse these companies all work with excel sheets. SpotMe has a history of
convincing Event organizers to change to something better.
Excel is not only the standard way,
It is the only way
of how non-Techies handle data.
The bitter insight is that it can’t be done. 

Excel is the standard way to deal with lists for non-tech people. 

It is not only the standard way. It is the only way. 

SpotMe and also I had to embrace that fact.
Patterns for scale
There is only little documentation on patterns that deal with handling complex scenarios. I put together a few
patterns that I found useful in dealing with complex data.

Please be aware that what you see are prototypes, not the final application.
Filtering a List with a lot of records
v
Finding a small set of data is an important task. 

Sometimes the data is much but only in one dimension. Meaning you have tons and tons of rows. 

One of the first patterns I established at SpotMe was filtering long lists with a relatively small amount of
columns. This is fairly straight forward. Each column has a text filter. These Text filters shorten the list.
This is a pattern users get really easily. Watch this video
Lists with a lot of records AND Parameters
Parameter Operator Value
With a large amount of columns the display of all the columns does not scale. This calls for a more
flexible way to filter data. The idea of the interface we used is that it should expand the simple filter in a
powerful way that is still easy to use.

Filters are built with a parameter, an operator and a value.

The parameter in this case is a list of all the columns of the participant table. 

The first iteration just had a dropdown with all of the 80 columns that made up the people data. This was
not efficient at all.
Searchable
Dropdowns
A simple way to make this much more efficient is to make the dropdowns searchable. 

This in itself is a very effective pattern.
Lists with a lot of records AND Parameters
Add multiple parameters
These filters can be combined. This allows to narrow down the selection really well.
Lists with a lot of records AND Parameters
Add filter logic
One last step is adding the logical operators AND & OR to the interface. The use of the textfield proved to be
much more efficient than building logic via the interface.
Lists with a lot of records AND Parameters
Add filter logic, version 1
The first version of the interface tried to visually group the items, making the interface cluttered
and hard to read.
Lists with a lot of records AND Parameters
Add filter logic
Assigning numbers to the parameters and allowing users to combine them in a text field was
surprisingly much easier to understand.
Lists with a lot of records AND Parameters
Let’s see the interface in action
Bulk Editing Data
As an example:


Find all
- Spanish speaking participants
- staying at the Hotel Belvedere
Assign them
- an emergency contact
- an emergency number.
Once you find the entries of data you need, you must be able to act upon them. This often means that
what you want to edit is different from the criteria used for the selection.
Bulk Editing Data
Process:
- Select entries to change
- Select the parameters that have to be changed
- Define which changes have to take place.
- Make changes
The idea behind bulk editing data is to find entries inside a large field and to change selected parameters to the same
values for each entry.
Bulk Editing Data
Search Select Make changes
This again uses a searchable dropdown, this time an advanced version of a multiselect.
Bulk Editing Data
Searchable multiselects
Searchable multiselects are a handy extension of the searchable dropdowns.
Bulk Editing Data
Let’s see how that works
Assigning groups
One last pattern I want to show is group assignment.

Sometimes you have to assign items of a list to a group. 

With only a few items you can have a group of radio buttons to choose from.

This however does not scale for larger sets of items.
Assigning groups
With large sets of items you can use the order of the elements in the list itself to make groups.

Instead of assigning elements to a group you place groups as headlines within a vertical list. Everything below
part of that group

This has the advantage of not having to touch each item to put it in a group.
Assigning groups
Let's see how that works
Importing Data
The challenges are endless. Importing data is a mind bender.
Handling Translations
Handling translations is evergreen of complexity
Merging content from different environments
Merging content from different environments. 

All these challenges pose huge obstacles and the patterns you saw help to overcome
some of these obstacles.
Happiness is overcoming obstacles.
Happiness is the surprise and delight
when something just works.
And the happiness the users feel is our reward.
Thank you!
I’m @bratwurstkomet on Twitter
Prototypes made with Protostrap

http://protostrap.ch

More Related Content

Viewers also liked

Scope & co
Scope & coScope & co
Scope & co
Memi Beltrame
 
Content Strategy
Content StrategyContent Strategy
Content Strategy
Memi Beltrame
 
Embracing Collaborative Design
Embracing Collaborative DesignEmbracing Collaborative Design
Embracing Collaborative Design
Memi Beltrame
 
Dynamic A/B testing with AB/CD
Dynamic A/B testing with AB/CDDynamic A/B testing with AB/CD
Dynamic A/B testing with AB/CD
Memi Beltrame
 
Clear Language and Readability
Clear Language and ReadabilityClear Language and Readability
Clear Language and Readability
Memi Beltrame
 
Mind the Gap: On Gender And Technology
Mind the Gap:  On Gender And TechnologyMind the Gap:  On Gender And Technology
Mind the Gap: On Gender And Technology
Memi Beltrame
 
Follow the Flow - Essentials of User Interaction Design
Follow the Flow - Essentials of User Interaction DesignFollow the Flow - Essentials of User Interaction Design
Follow the Flow - Essentials of User Interaction Design
Memi Beltrame
 
Prototyping and Scrum
Prototyping and ScrumPrototyping and Scrum
Prototyping and Scrum
Memi Beltrame
 
Elements of UX Design
Elements of UX DesignElements of UX Design
Elements of UX Design
Memi Beltrame
 
Just Married: User Centered Design and Agile
Just Married: User Centered Design and AgileJust Married: User Centered Design and Agile
Just Married: User Centered Design and Agile
Memi Beltrame
 
The User Experience of Near Field Communication
The User Experience of Near Field CommunicationThe User Experience of Near Field Communication
The User Experience of Near Field Communication
Memi Beltrame
 
Toniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
ToniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiToniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
Toniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
guestabc3dd6
 
Tips, Tools and Techniques to Boost Your Wellness Effort
Tips, Tools and Techniques to Boost Your Wellness EffortTips, Tools and Techniques to Boost Your Wellness Effort
Tips, Tools and Techniques to Boost Your Wellness Effort
context communication consulting llc
 
BiLogica - verslo analitikos paslaugos
BiLogica - verslo analitikos paslaugosBiLogica - verslo analitikos paslaugos
BiLogica - verslo analitikos paslaugos
eclectic78
 
Introduzione al situazionismo
Introduzione al    situazionismoIntroduzione al    situazionismo
Introduzione al situazionismoAlain Denis
 
Guide to Pensions 2017
Guide to Pensions 2017Guide to Pensions 2017
Guide to Pensions 2017
Ralph du Plessis
 
IoT Business Insights from Patents
IoT Business Insights from PatentsIoT Business Insights from Patents
IoT Business Insights from Patents
Alex G. Lee, Ph.D. Esq. CLP
 
Design Patents for Bluetooth Consumer Electronics
Design Patents for Bluetooth Consumer ElectronicsDesign Patents for Bluetooth Consumer Electronics
Design Patents for Bluetooth Consumer Electronics
Alex G. Lee, Ph.D. Esq. CLP
 

Viewers also liked (18)

Scope & co
Scope & coScope & co
Scope & co
 
Content Strategy
Content StrategyContent Strategy
Content Strategy
 
Embracing Collaborative Design
Embracing Collaborative DesignEmbracing Collaborative Design
Embracing Collaborative Design
 
Dynamic A/B testing with AB/CD
Dynamic A/B testing with AB/CDDynamic A/B testing with AB/CD
Dynamic A/B testing with AB/CD
 
Clear Language and Readability
Clear Language and ReadabilityClear Language and Readability
Clear Language and Readability
 
Mind the Gap: On Gender And Technology
Mind the Gap:  On Gender And TechnologyMind the Gap:  On Gender And Technology
Mind the Gap: On Gender And Technology
 
Follow the Flow - Essentials of User Interaction Design
Follow the Flow - Essentials of User Interaction DesignFollow the Flow - Essentials of User Interaction Design
Follow the Flow - Essentials of User Interaction Design
 
Prototyping and Scrum
Prototyping and ScrumPrototyping and Scrum
Prototyping and Scrum
 
Elements of UX Design
Elements of UX DesignElements of UX Design
Elements of UX Design
 
Just Married: User Centered Design and Agile
Just Married: User Centered Design and AgileJust Married: User Centered Design and Agile
Just Married: User Centered Design and Agile
 
The User Experience of Near Field Communication
The User Experience of Near Field CommunicationThe User Experience of Near Field Communication
The User Experience of Near Field Communication
 
Toniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
ToniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiToniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
Toniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
 
Tips, Tools and Techniques to Boost Your Wellness Effort
Tips, Tools and Techniques to Boost Your Wellness EffortTips, Tools and Techniques to Boost Your Wellness Effort
Tips, Tools and Techniques to Boost Your Wellness Effort
 
BiLogica - verslo analitikos paslaugos
BiLogica - verslo analitikos paslaugosBiLogica - verslo analitikos paslaugos
BiLogica - verslo analitikos paslaugos
 
Introduzione al situazionismo
Introduzione al    situazionismoIntroduzione al    situazionismo
Introduzione al situazionismo
 
Guide to Pensions 2017
Guide to Pensions 2017Guide to Pensions 2017
Guide to Pensions 2017
 
IoT Business Insights from Patents
IoT Business Insights from PatentsIoT Business Insights from Patents
IoT Business Insights from Patents
 
Design Patents for Bluetooth Consumer Electronics
Design Patents for Bluetooth Consumer ElectronicsDesign Patents for Bluetooth Consumer Electronics
Design Patents for Bluetooth Consumer Electronics
 

More from Memi Beltrame

Machine Learning for Designers - UX Scotland
Machine Learning for Designers - UX ScotlandMachine Learning for Designers - UX Scotland
Machine Learning for Designers - UX Scotland
Memi Beltrame
 
Machine Learning for Designers - UX Camp Switzerland
Machine Learning for Designers - UX Camp SwitzerlandMachine Learning for Designers - UX Camp Switzerland
Machine Learning for Designers - UX Camp Switzerland
Memi Beltrame
 
Machine Learning for Designers
Machine Learning for DesignersMachine Learning for Designers
Machine Learning for Designers
Memi Beltrame
 
Machine Learning for Designers - DX Meetup Basel
Machine Learning for Designers - DX Meetup BaselMachine Learning for Designers - DX Meetup Basel
Machine Learning for Designers - DX Meetup Basel
Memi Beltrame
 
Machine Learning for Designers
Machine Learning for DesignersMachine Learning for Designers
Machine Learning for Designers
Memi Beltrame
 
Protostrap
ProtostrapProtostrap
Protostrap
Memi Beltrame
 
Zero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open SourceZero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open Source
Memi Beltrame
 
The Big Shift
The Big ShiftThe Big Shift
The Big Shift
Memi Beltrame
 
UX in the city Coping with Complexity
UX in the city   Coping with ComplexityUX in the city   Coping with Complexity
UX in the city Coping with Complexity
Memi Beltrame
 
Product Owner ist ein Design Job
Product Owner ist ein Design JobProduct Owner ist ein Design Job
Product Owner ist ein Design Job
Memi Beltrame
 
Designed for the Worst Case - Zurich's water supply
Designed for  the Worst Case - Zurich's water supplyDesigned for  the Worst Case - Zurich's water supply
Designed for the Worst Case - Zurich's water supply
Memi Beltrame
 
Data Driven Design - Frontend Conference Zurich
Data Driven Design - Frontend Conference ZurichData Driven Design - Frontend Conference Zurich
Data Driven Design - Frontend Conference Zurich
Memi Beltrame
 
Artypedia
ArtypediaArtypedia
Artypedia
Memi Beltrame
 

More from Memi Beltrame (13)

Machine Learning for Designers - UX Scotland
Machine Learning for Designers - UX ScotlandMachine Learning for Designers - UX Scotland
Machine Learning for Designers - UX Scotland
 
Machine Learning for Designers - UX Camp Switzerland
Machine Learning for Designers - UX Camp SwitzerlandMachine Learning for Designers - UX Camp Switzerland
Machine Learning for Designers - UX Camp Switzerland
 
Machine Learning for Designers
Machine Learning for DesignersMachine Learning for Designers
Machine Learning for Designers
 
Machine Learning for Designers - DX Meetup Basel
Machine Learning for Designers - DX Meetup BaselMachine Learning for Designers - DX Meetup Basel
Machine Learning for Designers - DX Meetup Basel
 
Machine Learning for Designers
Machine Learning for DesignersMachine Learning for Designers
Machine Learning for Designers
 
Protostrap
ProtostrapProtostrap
Protostrap
 
Zero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open SourceZero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open Source
 
The Big Shift
The Big ShiftThe Big Shift
The Big Shift
 
UX in the city Coping with Complexity
UX in the city   Coping with ComplexityUX in the city   Coping with Complexity
UX in the city Coping with Complexity
 
Product Owner ist ein Design Job
Product Owner ist ein Design JobProduct Owner ist ein Design Job
Product Owner ist ein Design Job
 
Designed for the Worst Case - Zurich's water supply
Designed for  the Worst Case - Zurich's water supplyDesigned for  the Worst Case - Zurich's water supply
Designed for the Worst Case - Zurich's water supply
 
Data Driven Design - Frontend Conference Zurich
Data Driven Design - Frontend Conference ZurichData Driven Design - Frontend Conference Zurich
Data Driven Design - Frontend Conference Zurich
 
Artypedia
ArtypediaArtypedia
Artypedia
 

Recently uploaded

UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 

Recently uploaded (20)

UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 

Coping with Complexity - How to Design for Large Amounts of Data.

  • 1. Coping with Complexity Memi Beltrame WIAD Switzerland - Zürich, February 21. 2015
  • 2. Memi Beltrame I make things fun and easy to use. I run a small company called less a mess and I specialize in research and prototyping for projects with a high level of complexity. I am also the author of Protostrap, a tool to build clickable prototypes.
  • 3. We love Complex THings https://flic.kr/p/9G71KC I absolutely love complex things. We all do. We want challenges! These challenges are driven by complexity.
  • 4. more plates than we can spin Often Complexity is really overwhelming and paralizing, too much of everything. We are just not prepared to cope with it.
  • 5. Coping with complexity This talk is about what I learned on coping with complexity as a User experience professional. I hope it will help you in being more prepared next time something complex shows up.
  • 6. Complexity https://flic.kr/p/cFM3cd There are a number of type of complexity in our field. Complexity can be organizational, political or structural and probably it’s always a combination of those.
  • 7. Today I will focus on complexity that is tied to what we can see and do on the webpages themselves.
  • 8. Tech based complexity Responsive Design Mobile First Multi-Device Ready Complexity in Web-Interfaces also has a lot of dimensions. Often it is only perceived on the technical level, dealing with devices and display. The answers to those problems are mobile first and responsive design, multi-device ready and so forth. These approaches are all fine. But they are incomplete.
  • 9. Tech based complexity Focus on delivery The problem with these approaches is that they focus on the delivery of content. The content itself is secondary. As an industry we have started to realize that real content is preferred to lorem ipsum. But still: the focus lies on the delivery, and not on the content itself with all its dimensions.
  • 10. Data is the key Designing for digital media is more than handling the delivery by adapting to devices. Digital media must adapt to individual user roles, needs and behavior. The key to a flexible adaptation is data. https://www.flickr.com/photos/jdhancock/8031897271
  • 11. Dimensions of complexity - The amount of data to be displayed - The data’s structure - The process of how the data is created & edited - Searching & filtering data - How data changes over time The interesting dimensions of complexity all have to deal with data
  • 12. If you want to understand complexity you have to understand data and its function.
  • 13. actions user can do with data - Read - Enter new data - Edit & change existing data - Delete data - Undo what they just deleted - Search & Filter data - Combine data This is the data driven design approach. The point is to simulate everything that can be done with data. This is a list of very basic actions user can do with data.
  • 14. Case study I want to explore some of these dimensions with a case study of a project I was fortunate enough to be part of,
  • 15. SpotMe The project is called SpotMe. SpotMe is a mobile app for large scale events. These events are medical congresses or conventions for the tourist industry. Think big. The SpotMe app allows participants to see the program of the sessions, to interact with other participants or take part in live surveys happening during sessions. As an event organizer you can purchase your branded SpotMe app tailored to your event.
  • 16. My part in the project was to help SpotMe team with the design of an administration tool for the events. This tool, called Backstage, allows event organizers to manage all the data that is part of the event. This is the participants, the agenda and the locations and much more.
  • 17. First Morning, before coffee. What is interesting about SpotMe is the size of it all. The events that SpotMe accommodates have thousands of participants and an enormous amount of parallel sessions. Some sessions contain nested sessions for example in the case this symposium inside a conference that consists of several talks with work from different authors.
  • 18. Where do I start? So where do I begin to solve the problem? I find the problem first.
  • 19. Content inventory and oBject Model It’s always a good idea to get an overview of the content we have to deal with. A high level content inventory is a good place to start. For spotme this took the form of a Content object model. I listed Content Objects and their types for each Topic I could find in the app.
  • 20. scenariosResearch I then used the list to go through each type of content to find out what tasks users had to be able to fulfill in backstage. This gave me a huge backlog of tasks and made clear where the huge challenges were.
  • 21. 80 Columns - 5000 Rows ENter: The Bad GUy One of the biggest challenges was this one. This is the excel sheet that contains participants of an event. As you can see it is very incomplete and but it shows the dimensions. Handling the data of these super-sized events is a messy affair.
  • 22. THe excel Nightmare • No single point of entry • No designated person • No content strategy know-how • No established workflows • No reason to change At this scale it is impossible to have a single point of entry or a designated person to deal with the data. These companies also don’t know much about content strategy and there are no established workflows for the governance of content. To make things worse these companies all work with excel sheets. SpotMe has a history of convincing Event organizers to change to something better.
  • 23. Excel is not only the standard way, It is the only way of how non-Techies handle data. The bitter insight is that it can’t be done. 
 Excel is the standard way to deal with lists for non-tech people. It is not only the standard way. It is the only way. SpotMe and also I had to embrace that fact.
  • 24. Patterns for scale There is only little documentation on patterns that deal with handling complex scenarios. I put together a few patterns that I found useful in dealing with complex data. Please be aware that what you see are prototypes, not the final application.
  • 25. Filtering a List with a lot of records v Finding a small set of data is an important task. Sometimes the data is much but only in one dimension. Meaning you have tons and tons of rows. One of the first patterns I established at SpotMe was filtering long lists with a relatively small amount of columns. This is fairly straight forward. Each column has a text filter. These Text filters shorten the list. This is a pattern users get really easily. Watch this video
  • 26. Lists with a lot of records AND Parameters Parameter Operator Value With a large amount of columns the display of all the columns does not scale. This calls for a more flexible way to filter data. The idea of the interface we used is that it should expand the simple filter in a powerful way that is still easy to use. Filters are built with a parameter, an operator and a value. The parameter in this case is a list of all the columns of the participant table. The first iteration just had a dropdown with all of the 80 columns that made up the people data. This was not efficient at all.
  • 27. Searchable Dropdowns A simple way to make this much more efficient is to make the dropdowns searchable. This in itself is a very effective pattern.
  • 28. Lists with a lot of records AND Parameters Add multiple parameters These filters can be combined. This allows to narrow down the selection really well.
  • 29. Lists with a lot of records AND Parameters Add filter logic One last step is adding the logical operators AND & OR to the interface. The use of the textfield proved to be much more efficient than building logic via the interface.
  • 30. Lists with a lot of records AND Parameters Add filter logic, version 1 The first version of the interface tried to visually group the items, making the interface cluttered and hard to read.
  • 31. Lists with a lot of records AND Parameters Add filter logic Assigning numbers to the parameters and allowing users to combine them in a text field was surprisingly much easier to understand.
  • 32. Lists with a lot of records AND Parameters Let’s see the interface in action
  • 33. Bulk Editing Data As an example: 
 Find all - Spanish speaking participants - staying at the Hotel Belvedere Assign them - an emergency contact - an emergency number. Once you find the entries of data you need, you must be able to act upon them. This often means that what you want to edit is different from the criteria used for the selection.
  • 34. Bulk Editing Data Process: - Select entries to change - Select the parameters that have to be changed - Define which changes have to take place. - Make changes The idea behind bulk editing data is to find entries inside a large field and to change selected parameters to the same values for each entry.
  • 35. Bulk Editing Data Search Select Make changes This again uses a searchable dropdown, this time an advanced version of a multiselect.
  • 36. Bulk Editing Data Searchable multiselects Searchable multiselects are a handy extension of the searchable dropdowns.
  • 37. Bulk Editing Data Let’s see how that works
  • 38. Assigning groups One last pattern I want to show is group assignment. Sometimes you have to assign items of a list to a group. With only a few items you can have a group of radio buttons to choose from. This however does not scale for larger sets of items.
  • 39. Assigning groups With large sets of items you can use the order of the elements in the list itself to make groups. Instead of assigning elements to a group you place groups as headlines within a vertical list. Everything below part of that group This has the advantage of not having to touch each item to put it in a group.
  • 40. Assigning groups Let's see how that works
  • 41. Importing Data The challenges are endless. Importing data is a mind bender.
  • 42. Handling Translations Handling translations is evergreen of complexity
  • 43. Merging content from different environments Merging content from different environments. All these challenges pose huge obstacles and the patterns you saw help to overcome some of these obstacles.
  • 44. Happiness is overcoming obstacles. Happiness is the surprise and delight when something just works. And the happiness the users feel is our reward.
  • 45. Thank you! I’m @bratwurstkomet on Twitter Prototypes made with Protostrap
 http://protostrap.ch