I was asked to help the inhouse design team with the conceptual design for a responsive interactive feature website for ‘Die Welt’ about the topic “Angst”, which features four sections: “Ich” – a story about the topic, “Du”- a video based game simulation/experience about the topic, “Sie” – experts and articles, and “Wir” – the community.
The main concept was already settled, the guys did a lot of workshops and thinking sessions ahead and they needed help, somebody with a fresh view, helping to extend the already defined conceptual items, creating interaction flows, take care of responsive behaviour and conducting usability testing.
We did all the interaction design work in Axure, generating click ready prototypes for desktop and small screen view and conducted in-person usability testing sessions.
Question Time! What are our objectives? – an example
What are the main objectives of that feature microsite?
Questioning and highlighting and keeping the objectives in mind is essential to design a successful product. So in this case, we were trying to solve the following problems:
Questioning and highlighting and keeping the objectives in mind is essential to design a successful product. So in this case, we were trying to solve the following problems:
a) targeting new audiences
b) boost the branding
Another question was to find out which user actions are desired most to fulfill these objectives?
When we go back to the objectives we can derive two main user actions which are directly related to our targeted objectives:
Interacting and participating (and therefore: strengthen the branding through user engagement)
Sharing (and therefore: strengthen branding through sharing and targeting new audiences)
So, our sites’ main purpose were:
- Inform me – this was fulfilled by the story and excellent journalistic work, which builds of course trust and this is the groundwork (keep the objectives in mind!)
- educate me – this was fulfilled by the ‘Experts’ section (builds trust,groundwork) and:
- engage me – aka: make me part of it, which was fulfilled by the community and video simulation section.
- educate me – this was fulfilled by the ‘Experts’ section (builds trust,groundwork) and:
- engage me – aka: make me part of it, which was fulfilled by the community and video simulation section.
But there was potential.
So how could we e.g. increase engagement to fulfill our targeted objectives?
A suggestion was to do an hashtag campaign before, while and after launching, where users can send in their posts and questions via twitter,tagged with a special hash which could then appear within an extra section of the community. Privacy was a big concern here, but on the other hand it would spread the word about the feature, so why not try it? Sadly we had to postpone it in this release due possible editoral work overload in that case. The comments need to be unlocked by the editoral department, so it would have been too much workload and nearly impossible to verify every tweet within that short amount of time.
So how could we e.g. increase engagement to fulfill our targeted objectives?
A suggestion was to do an hashtag campaign before, while and after launching, where users can send in their posts and questions via twitter,tagged with a special hash which could then appear within an extra section of the community. Privacy was a big concern here, but on the other hand it would spread the word about the feature, so why not try it? Sadly we had to postpone it in this release due possible editoral work overload in that case. The comments need to be unlocked by the editoral department, so it would have been too much workload and nearly impossible to verify every tweet within that short amount of time.
Problems we saw: Copy and usability
As mentioned, the main concept relies on four sections: “ICH”, “DU” “SIE” and “WIR”.
Those labels were defined by the editoral department and we advised often to overthink it or at least sub label it because its unclear labeling did not meet peoples expectations on what’s behind and therefore seems confusing.
The problem: “ICH” is, from the readers perspective, the reader itself, but in our example, actually represents the systems point of view, the story from another person, whereas “DU” is understood as “you”, the system and not as “me” the reader – from the readers point of view.
Those labels were defined by the editoral department and we advised often to overthink it or at least sub label it because its unclear labeling did not meet peoples expectations on what’s behind and therefore seems confusing.
The problem: “ICH” is, from the readers perspective, the reader itself, but in our example, actually represents the systems point of view, the story from another person, whereas “DU” is understood as “you”, the system and not as “me” the reader – from the readers point of view.
So this was a little bit confusing to people. After a few discussions we solved this with sublabeling the sections. In addition, we suggested to colorcode the sections, because color is some kind of salient information who is processed easily and subconsciously by the human brain and works perfectly for such a manageable number of sections.
The “Sie” (Experts Section) was meant to sublabel “glossary” first, which seemed confusing too.
After discussing the wording we stick to a clear and understandable label, which meets the expectations of people.
After discussing the wording we stick to a clear and understandable label, which meets the expectations of people.
Fig. 01: The four sections including sublabeling and colorcode when hovering
Fig. 02: The additional menu expanded
Usability Testing
At a certain point, we prepared and ran a session with small in person usability tests with some polished Axure Prototypes. Therefore we recruited mostly in house test persons which had nothing to do with the project, which means they didn’t know it.
We prepared a small screening script and questionaire. The test persons were asked to think aloud while we gave them specific tasks within each section to solve, asked them what they’d think the purpose of the sections and site is in their opinion and what they think they could do here.
Then we integrated the test results in our next design iteration.
Then we integrated the test results in our next design iteration.
Question Sample: Hamburger Menu left or right?
One of the questions we tried to solve with the usability session affected the position of the additional hamburger menu.
The question came up due the fact that at the ‚Welt‘ mobile site the position of the menu is on the left site, so some of the team members were concerned if it will be confusing to place it on the other site for users, which would be coming from the welt website.
The question came up due the fact that at the ‚Welt‘ mobile site the position of the menu is on the left site, so some of the team members were concerned if it will be confusing to place it on the other site for users, which would be coming from the welt website.
Fig. 03: Left: the position of the hamburger menu on the mobile ‘Welt’ website versus our position
On the other hand, placing the hamburger menu on the right side is more convenient – in terms of ergonomics – for users if we want to follow the design principle ‚designing for thumbs‘ – which is still, when you observe actual users interacting with a smartphone – a common usage pattern.
Due the fact that most people are right handed it would be much easier to reach the menu when it is placed on the right side instead left. It turned out, that most of our testpersons got it right and were not that confused about the switching of the position.
These results rely on smaller smartphone screens, we have to be aware of changing those positions when screens continue to increase. Another result of the test was to place the menu as a sticky item, so it’s easy accessible no matter where people are.
Due the fact that most people are right handed it would be much easier to reach the menu when it is placed on the right side instead left. It turned out, that most of our testpersons got it right and were not that confused about the switching of the position.
These results rely on smaller smartphone screens, we have to be aware of changing those positions when screens continue to increase. Another result of the test was to place the menu as a sticky item, so it’s easy accessible no matter where people are.
Wording Issues
As already mentioned by us, our testers would have chosen another classification for the sections on paper but it was quickly learned by interacting with the protoytpe including the sublabeling and color information.
Fig. 04: Quick and dirty ‘card sorting’ during our sessions
Fig. 05: Placing the feature on the ‚Welt‘ website. Recommendations and suggestions based from testing results
Fig. 06: Working out a intro concept, working with text masking, idea scribbling and recommendations for further discussion
Learnings
Even ‚small‘ projects can have plenty of usability traps (and also copy is a crucial part of usability and therefore UX).
Creating high end prototypes with Axure can have it traps too. It’s of course a very cool tool for creating ready to test high end prototypes, but the devil is in the details. One can get bogged down easily and it could be very time consuming when creating highly interactive prototypes with lots of dynamic panel rabbitholes. Perhaps we should have started first with some lofi paper prototyping which could have saved us a little bit time before diving straight into fine tuned prototypes which on the other hand are – without doubt – perfect for testing.
