StoryMaker 2 will officially launch this fall. The redesign focuses on giving StoryMaker more engaging story creation functionality. To help users and trainers better understand the decisions that went into the redesign, the team wants to share some insights from the process. This post about story creation workflow in the app is the first in a series of posts we’ll put up through the release.

StoryMaker 1’s paging interaction.

StoryMaker 1’s paging interaction.

StoryMaker 1 features “paging” interaction for users to navigate through a story. As you can see in the animation on the right, this is natural if you read a left-to-right (LTR) language such as English or Spanish. Though we planned to reverse the interaction for right-to-left (RTL) languages such as Arabic, we didn’t anticipate the coding difficulty of flipping interaction while maintaining functionality.

As we got closer to release and the time crunch hit, we realized that the only option was to ship StoryMaker 1 with LTR navigation exclusively––a natural for westerners and still somewhat usable for RTL readers but certainly not the intuitive experience we wanted.

Through testing and feedback it was clear that the left-to-right swiping navigation was confusing to our sizable right-to-left audience. We knew we had to change it. But, we didn’t want to just slap some arrows on the screen to make it obvious which direction to go. Instead we wanted to try and find an intuitive answer for anyone using the app, regardless of how their culture reads.

We had two initial thoughts: the Clock and the Scroll.


The Clock

Clocks are such a universal tool it’s hard to even think about using them for anything but telling time. But National Public Radio (NPR) took the basic function of a clock and instead of having it segmented into 12 equal hours, it allows the full circumference to dynamically display the content of a show. They were even kind enough to take photos of some of their programs from their “Book of Clocks” and share them on their tumblr (plus a second set as well for those really excited by this). We were inspired by this innovative approach.

At a moment's glance, you can review these and understand quite a bit about both shows. The power of this display is the story is always a complete circle, regardless of overall length. It doesn’t matter that ‘A Prairie Home Companion’ is twice as long as ‘Morning Edition,’ because they each have their own unique pace and structure. We thought it would make for a very interesting visual display to have all of the clips in a story be a different period of the clock. That way, people could very easily see what clips in their story was taking up the most time.

It became obvious that to implement the clock well would be a lot of work. Many other pieces of the story creation functionality were still up in the air when we started, making it even more difficult to design. Clip cards, narration, and a few other pieces were just coming together.

The clock is an incredibly exciting idea, but we need to find some more time to think through some of these questions and understand how they impact both the story and the person making it. I am excited to think about how we might be able to fit this into future versions. At the moment I see it fitting in beautifully during the editing process of a story.

I know what you’re thinking, it’s just a circle, that can’t be that hard to add? I’ll give you an open question we still have yet to answer: how should we handle secondary/supporting (commonly referred to as b-roll) material when displaying a story in this way? Are those lines that are used in the Morning Edition clock good enough? Can you add clips to the story from this screen?


The Scroll

67% of one handed users keep their phone in their right hand. (illustration from uxmatters.com)

67% of one handed users keep their phone in their right hand. (illustration from uxmatters.com)

In the end, we decided on the scroll. The scroll option is so common that you don’t even notice it. You’ve  had to scroll to reach this paragraph in this blog post. It doesn’t matter what social network, news site, internet forum, or bbs you first signed onto, you probably spend a good amount of your day scrolling from the top of feeds to the bottom of them. We have found there are at least three languages in the world that do read from bottom to the top.

Mobile devices have accelerated the trend of top-to-bottom scrolling to interact with content. A 2013 study by Steven Hoober of UXmatters.com indicates the vast majority of people hold devices vertically. From that orientation, a vertical swipe is a common and easy action for anyone.


Choosing our Battles

We were fascinated by the potential of the clock, and I really hope we can find ways to incorporate it in the future. To help people navigate a story for now, we are going to stick to solutions which are intuitive and natural for as many people as possible, which is why vertically is how navigation works in StoryMaker 2.

Designing software is a complicated process, decisions which feel small can quickly snowball and become immovable mountains before you know it. A tremendous amount of thought has gone into redesigning StoryMaker. I look forward to hearing all your thoughts about it.

Comment

Link: http://smallworldnews.com/blog/vertical-scrolling-in-storymaker-2