WMDE Engineering/UserExperience

''Goals for this page: Laypersons should be able to understand why we work on UX and have a concept of what we do. Comment: directly in text, just format meta stuff so someone else can recognize what the actual content is and what comments are''

We want to improve the usefulness and usability of Wikimedia projects.

How we work – Lean UX
We combine creativity and research to create functionality and interfaces.





Tasks:
 * Usability Testing
 * Needfinding
 * Create Interface Designs
 * Consulting on UX topics and help others to solve minor UX problems themselves.

Needfinding
What are our communities’ motivations, activities and problems? What is useful for them?

For this we talk to users and/or observe them doing their work.

Create Interface Designs


We design new interfaces or improve older ones using sketches on paper, drawings in Inkscape or programming in HTML and CSS. The designs consider usability rules and Wikimedia styleguides.

Usability Testing
Does the interface work like we expect? Is it usable?

Consulting on UX topics
We help with suggestions and assessment of product plans or interfaces.

Tools

 * Cutycap is a command line based too which will generate and (semi) editable (e.g. using Inkscape) svg image from a webpage, e.g.  cutycapt --url=https://de.wikipedia.org/wiki/Wikipedia:Hauptseite --out=WP.svg  will generate an image of the German Wikipedia's homepage and will put that in the file WP.svg in your home folder.

--

=DUMP=

Methods UX:

 * Surveys: Popular, but often the data is not reliable and for actual measurements or finding needs, they are not a good choice.
 * Guerilla Usability Test: Quick test of 3-5 users. Do small tests, but often!
 * SUS: easy to use standard survey
 * In-Context: Test/Exploration, like a usability test/interview but with the participant doing his/her own tasks on his/her own equipment.
 * Interview/Observation (see Beginners Guide to User Needfinding)
 * Graphical Elicitation and Analysis
 * Design Studio
 * Paper Prototyping
 * Brainwriting
 * (Other co-creation)
 * Affinity Diagramming

Show us how you work
… Signup:… Tools:…

Recruiting

 * Opt in pool for community. Example form for this from WMF. Don't forget to ask for experience etc.
 * Usertesting etc. might be useful to get beginners – but it costs. Alternative: Snowball-sampling.

Tools

 * google Forms (privacy?)
 * google hangouts
 * Calls and Video and Screensharing (!)
 * Firefox Hello
 * Calls, Video and Screensharing using Firefox Hello. Currently: The participant needs to activate hello and send me the link.

Challenges:

 * How can we hear the beginners and intermediates?
 * At the top of the wikipedia page there is a banner, showing various projects. Could we there unobtrusively ask users if they would like to donate 30min of their time to participate in a (remote) test?
 * Meetups of non-tech interest groups (PMs will know more)

Tasks and Orga
A Kanban Board with lanes (Testing, Need Research, Creation/Ideation, Graphic/Motion Design)

Open: How do I get tasks and how do the teams I work with get the output and discuss it with me?

Templates

 * Personas/User Profiles
 * User Quotes
 * User Journeys
 * Introtext test (to read to participants)
 * Checklist for common UX tasks (with only the essential points!!!)

Tools

 * Byzanz for gif-screencasts for problem demonstration to send in an image.
 * Libre Office Impress. Slides and simple prototypes.

UX for everyone!
There are many UX methods you can try yourself.

Using Heuristics
Usability Heuristics are rules of thumb that help to ensure a good usability. Use them like a checklist. Ideally, you apply them in a little scenario like »I want to create a new page« or »replying in a discussion« Common and empirically evaluated are the n Usability Heuristics by J. Nielse There is also a (slightly academic) article on doing an Heuristic Evaluation

Use Patterns and Standards
If there is a standard, a styleguide or a pattern collection for the interfaces you create, follow these rules. It is hard to create good, custom interfaces for standard tasks. Aside of that, users will find something familiar more intuitive (See: Intuitive= Familiar)

Paper Prototyping
Paper prototypes are mock interfaces of software created with pen and paper. They allow to:


 * communicate ideas early (because you have something to show),
 * avoid the impression that an idea or even the code for it is already finished (because a paper prototype looks unfinished)
 * do simple tests and/or feedback sessions with users.
 * Quickly change something without throwing away hours of coding.


 * Instructions on how to prototype using paper can be found in ALAs paper prototyping article.
 * Some misconceptions on paper prototyping

When should I ask an UX expert?
If the problem seems to be unusual for you it makes sense to consult a UX designer, e.g.


 * You can't find a standard widget that does what you need, like a combination of a button and a selector in the same element or so.
 * You have no idea what your users actually need
 * You know you need to test your interface but don't know how or you just feel uneasy about the idea of doing it.


 * Use patterns
 * When should I ask a UX person?
 * Discussing Design, Sketching etc.
 * Teach yourself:
 * Reading Don't make me think
 * Participate in UX Research, lead a session, if you like

Working with the WMF:

 * Some things exist (Personas)
 * WMDE needs to make sense of such materials (usually, such deliverables are not drop-in-act-on information)
 * How can we pool our efforts

Interface to community:

 * Opt in to tests (see above, target beginners challenge)
 * Come to co-creation sessions
 * Before, After Workshops, Meetups
 * As well: Interested Readers, Beginners etc. should also sign up. How can we target them.
 * »Design« and »Support« or »Help needed« may be used in the bugtracker, like [at owncloud](https://github.com/owncloud/core/labels/design).
 * ... please add!

Interface to PMs
Hypothesis: PMs work with many people, hear their opinions. UX Research typically works with few people and observes behaviour. This would mean we could complement us very well!

Suggestion: Add a "get information about usage context/workflow AND/OR involve UX" to the add-a-new-feature community communication guideline.

Fun and Innovation

 * Among the Wikidata swag is a checkered writing pad. Naturally, there should be a lined pad for Wikipedia and a blank one for Commons, too.
 * Could we generate easy to understand graphs from Wikidata? e.g.
 * automatic, Isotype-Like amount visualizations.
 * conversion to intuitive units: "As heavy as 13 cars"

Needs improvement

 * Watchlist page

quickMockup
A simple, libré tool to create stuff-to-see from stuff-you-think