0

This is what I came up with: https://marvelapp.com/jjace4/screen/34738210 (summarized version)

After finishing the page I got user feedback (design leaders from the UX community). The feedback that I got was that it lacked storytelling and details about the process, so using a summarized version is an attempt that failed.

I only reviewed the content by writing more, but the layout became too wordy and lacked visual interest, so people will probably scan the page or avoid reading. Here's the result: https://marvelapp.com/jjace4/screen/34743860 (full process version)

I'm thinking about possible solutions: 1-reduce vertical scrolling by using horizontal sliders for some sections, so taking advantage of horizontal scrolling, making the page shorter. It will also make the page more interactive. 2-replacing content for videos, so using videos will allow me to reduce clutter and to play more with different layout techniques and also reducing content 3-using progressive disclosure

Any suggestions?

  • Why is it all on one page? – Matt Obee Nov 13 '17 at 12:48
  • Because it's a one-page case study in a portfolio that will contain many, I don't want to break the case into many pages and for some reason, the reader skips important facts. But I could indeed do some sort of modal popup. I was using photoshop for this layout and now I'm moving to Adobe XD, which could allow me to prototype better – Daniel Vianna Nov 13 '17 at 17:41
  • I'm not sure why this is getting votes to close... Sure there are many solutions, but the question itself is focused, with a clear problem. – maxathousand Nov 22 '17 at 15:59
1

If you say "horizontal slider" to mean "horizontal scrollbar," I'd highly recommend against it. Many people have no idea how to scroll left and right, it's not a common task in a web setting, and a lot of basic computer mice don't even support it.

If "horizontal slider" means more of a carousel, you should know that most people will not click/know to click the next page. For example: shouldiuseacarousel.com

So what to do about a long, single page? I think Bootstrap's documentation handles this pretty nicely. It uses an always-visible side navigation that actively highlights where the user is in the page. Additionally, the user can use the side navigation to jump to any section in the page. It successfully provides the user with the agility needed to make a long page usable.

  • Computer mice do support horizontal scrolling, it's just that no one ever told us that you have to hold shift. – Kitanga Nday Nov 22 '17 at 15:48
  • 1
    @KitangaNday Mind blown.. I knew that worked in Photoshop, but not anywhere... – maxathousand Nov 22 '17 at 15:51
  • lol, you're welcome, always remember, if it works in one popular piece of software, someone else probably copied it. Tips hat – Kitanga Nday Nov 22 '17 at 15:53
  • 1
    Kind of embarrassed that I fell into the "Many people have no idea how to scroll left and right" category I mentioned.... :| I've always just clicked the middle wheel button and moved the pointer – maxathousand Nov 22 '17 at 15:54
  • That is annoying (holding the middle wheel button and all), it interfers with another cool feature (on chrome at least): opening a link in a new tab. I honestly hope software devs can switch away from such designs and find smarter ways of letting us horizontally scroll (maybe even a tooltip telling us we can use shift+scroll to horizontally scroll upon hovering over a horizontal slider). – Kitanga Nday Nov 23 '17 at 11:48
0

Might I suggest you just pare down the content, making it cleaner and more succinct? It's good to include key details, but it feels like there's just "too much stuff" here, especially once you get to the key insights section. Perhaps organize the page by "here was the problem, here's how we got to the solution, and here were the results."

Make sure the messaging is clear -- why would one want to track the performers in Cirque de Soleil? Interesting detail, can the "why" be explained in a sentence? The "I don't speak English" headline made me think that was something you were saying about yourself and a challenge you faced with the project. Ask some non-tech friends for key takeaways and test their understanding.

Here are a couple of examples of UX project storytelling pages that I like, hope this is useful inspiration:

https://www.reallygoodux.io/

http://simonpan.com/work/uber/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.