This is just a test to explore user interactivity in News media with an already published article( based on this CBC article.)
below there is basic wireframe navigation of how I assume readers get to their stories. I used hover triggers for the graphic containing a bubble chart and tap triggers to reveal the data information.
point of interest: the graphic inside the story
the standard size for our graphics on the web is 1920×1920 like the one above but from my pov it tends to be too much of a live area for the hover trigger.
Things to find out about:
- Does the developer restricts the active area or does it have to be declared from the prototype?
- best practices for this type of graphics
Things to remember:
- lookup for mask group order in layers.
- hover triggers are fun for the web but not very useful on mobile, especially if the information has to be delivered a certain point in the story and not wanting to lose the reader interest.
- it will be interesting to create a design system for mobile and web interaction following CBC’s style guide (icons, buttons, triggers, etc)