5 hour Prototype Challenge: BBC iPlayer Radio app using Origami Studio
Guest Contribution
5 hour Prototype Challenge: BBC iPlayer Radio App using Origami Studio
Focus area: the station selector wheel
In this series for Prototypr I will be prototyping interesting interactions from my favourite apps and some client projects, using Origami Studio. I will be focussing on one unique, challenging concept in each app, to increase my knowledge of the tool and hopefully benefit the Origami community!
Challenge #1: BBC iPlayer
Background:
The BBC iPlayer Radio app is one of my most used apps. The home screen has a great spinning wheel to scroll through 20 BBC stations.
?? Goal: Understand how to animate content on a circle using Origami's Cartesian coordinate system
? Focus: Recreate the spinning station selector wheel
? Time taken: 5 hours
? Tool: Origami Studio
? Files: Origami studio, Sketch and source files are available in this Dropbox folder
[ Step 1 ] Decide What to Make, and What to Fake
For this Medium series, I will try to only prototype things I can learn from. Here’s my make/fake list:
Make
- Scroll wheel of icons
- Hero image and text info for the selected station
Fake
- Menu bar
- Listen now bar
- Currently listening bar
The elements to make are displayed in red, the rest (black) will be faked:
[ Step 2 ] Creating a Basic Interface in Sketch
Device
For this prototype I will be designing for iPhone 8 only. Future challenges will use auto-layout style logic to be responsive, but not today.
Thought Process
First, make sure I’m not reinventing the wheel:
It’s a pretty simple design, but I will still use screenshots where possible to save time. Designing straight in Origami is ok, but Sketch is still far easier and copying from Sketch to Origami works great.
After 20 minutes I had created a sketch file for the app. There’s just one radio station icon, as I will be duplicating these in Origami. If I have time, I’ll create icons for each station, but for now we will be heavily promoting Radio 1.
[ Step 3 ] Importing into Origami
Copy and pasting the Sketch artboard almost worked perfectly. Sadly the spinner’s background oval (with a grey gradient) didn’t come across correctly. This was pretty simple to make in Origami:
- Create an oval layer
- Set it as a mask
- Apply the mask to a fill layer which has a gradient
If I go over 5 hours by those 2 minutes, it’s not my fault.
[ Step 4 ] The Spinner
I setup a loop builder of 20 station icons (all using the Radio 1 icon for now). Positioning this looped content with staggered Cartesian coordinates, such as Icon 1 at (0,0), Icon 2 at (10,0), would be easy in Origami?—?however these icons are positioned in a circle.
Point on a circle’s perimeter to Cartesian coordinates
I needed to use trigonometry to calculate the Cartesian coordinates for a point on the perimeter of my spinner circle.
The following simple equations will do the job:
x = cos(?)*r + x0
y = sin(?)*r + y0
Where ? is angle around the circle,
r is circle radius,
(x0,y0) is the origin point if it's offset from (0,0).
This will help: https://en.wikipedia.org/wiki/Unit_circle
Make it spin
I have the radius of the spinner, so I just need an angle for each of the 20 stations. They’re equally spaced around the peremiter, so ? = (360 / 20 * loop index).
Ok, so now the spinner needs to spin, or in other words the icon angles need to be offset. My first attempt was to put the icons in a group and horizontally scroll that group. The scroll x value would then be added onto my original loop of angles at the start of the trig calculations:
This was one of those short lived moments of celebration. It quickly dawned on me I’d taken one step forward on my to-do list, but added another 10 on to the end of it…
Adding paging
The scroll needs to be paged, so it actually stops moving when an icon is perfectly aligned in the top centre position. Right now it aggressively scrolls back to the original Radio 1.
At this point I got stuck, very stuck. I wasted nearly an hour trying to make the scroll patch flow nicely, only to realise it could only ever move one page at a time, no matter how far I moved the spinner round. This is a limitation of the scroll patch. (e.g. a quick spin to the right from icon 1 to 10 would just jump back to icon 2 ?).
Change of plan?—?Use the drag patch with rounding
In the end I used the much simpler drag patch. This was great, but the patch offers no paging. I needed to round the drag position output to the nearest page size (my page = 360 / 20 = 18). I now have smooth, paged circular spinner!
[ Step 5 ] Real data loops
I was getting a bit tired of only listening to Radio 1. Despite being conscious to only focus on the unique challenges (looping images certainly isn’t one), it was becoming difficult to test how well the spinner was working when all the icons were identical.
Luckily the BBC website had all the hero images and SVG icons on one page: http://www.bbc.co.uk/radio#stations ?
The decision instantly paid off, too. I noticed that my trigonometry positioned station #1 at 3 o’clock on my spinner, instead of 12 o’clock. Surprisingly I didn’t notice this with 20 identical icons.
A working version
Below is a screenshot from the end of day 2, a working spinner with real icons. The hero image horizontal scroller is present, but not hooked up to move just yet.
[ Step 6 ]?—?Determine the Selected Station
To update the hero image and the station info text, I needed to know which station the user selected, aka which icon was at the top of the spinner, aka which icon was in position = (0, -247).
[ Step 7 ] Animate Data Based on Selected Station
With this new knowledge I can animate the hero image scroll patch to ‘jump to’ the correct position when the selected station changes. I also linked the selected station loop to an opacity transition for my station info text.
[ Step 8 ] Little Visual Touches
I had 15 minutes left, so I decided to pick two small items from my task list:
- Grow the selected station icon.
- Desaturate de-selected station icons.
Making the icon grow was simple: attach the ‘selected station’ loop to a pop animation and transition?—?which were then linked to the icon scale value.
Changing image saturation isn’t supported in Origami, however you can use a blur component to desaturate anything in the same group.
5 hours is up! ??
The gif below shows the prototype is pretty much done if you use the spinner to choose station, however the hero can still be scrolled independently of the spinner.
I did try to start work on syncing the spinner drag and hero scroll, I even created my own modified drag patch with a ‘jump to’ feature. Unfortunately there was too much of a recursive relationship between spinner and hero in my initial logic, so a full refactor would be needed (aka no longer a simple, lean prototype).
Fortunately swiping a hero carousel is quite a common interaction (unlike the spinner), so for user testing sake I think this prototype would be sufficient. I would just keep an eye for users trying to swipe the hero to see if it’s even worth adding in development.
If I had one more hour… ?
I’m pretty happy with the limitations of this prototype, however I would love to work out how to sync the scrolling hero with the spinner?—?for my own learning.
Oh and I would tidy up (and speed up) the Origami Studio file with grouped components. Luckily the performance was fine for this prototype.
Lessons learnt ?
- See if the drag patch can help with a difficult scroll patch problem, before wasting an hour.
- Limit the amount of fields using looped data, but use full datasets for those fields right from the start.
Files ?: If you would like to open up and explore the Origami Studio file, all the files are in a Dropbox folder. Why not see if you can crack the synced hero and spinner problem ?
Thank you ?: As always, to the Origami Community for help on tricky problems. In particular Peter Ryan Zich who helped a lot with the scroll/drag patch issue and Ryan Yoshinobu Barkataki who suggested the desaturation solution.
https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href
5 hour Prototype Challenge: BBC iPlayer Radio app using Origami Studio was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.
Powered by WPeMatico
