2

Had a discussion with the stakeholders regarding the things they require and they suggested to convert the product's modal window in the similar form the WRAP is doing(Open any image just after one viewport)

enter image description here

So I did a heuristics check and found out some of the laws it is violating and also after doing a small peer usability testing, I found out people are unable to use it easily but are very fascinated with this new type of UI as it is different.

So just like the wrap, is it okay to provide the finger depended gestures on the pointer based devices? Like swipe instead of scrolling, multiple arrows navigation on a single view?

One option could be the usage of arrow keys, just like the dribbble does?

If it is okay then what are the points that I should cater before proceeding with the modal view so that it'll look pleasing also and will not break the experience of the web app?

1

Some of this will be opinion.

The Wrap experience appears to be a mobile first experience that wasn't translated to the desktop well. This also might be an instance of describing the solution instead of explaining the problem and asking the question.

A swipe is a scroll with a specific destination. What makes the vertical experience from Wrap a poor execution is that it doesn't work on scroll. You have to click and drag; thereby, not being a "swipe", which is what they say to do.

As an alternative, consider the Mac Pro site. Each vertical scroll animates to a specific destination; thereby, being a "swipe". With the page view dot indicators, which Wrap also uses, but that Apple lets you click on to jump to a specific point; in other words, it's actual navigation not just a visual indicator of position. (And the mobile experience is different, but works in a similar way.)

Mac Pro vertical scroll

For the horizontal, the same "rules" apply. Swiping is scrolling with a target. Given the move toward gesture-based navigation having to click the forward and back arrows makes a certain amount of sense...don't want people to accidentally got back or forward in their browser (but the modal seems to disable that gesture). Consider Cover Flow in Finder on macOS. Each "swipe" gesture moves one file to the left or right. For Wrap, the mobile experience is all gesture-based, but the same rules don't apply from desktop to mobile.

enter image description here

There's also the accessibility considerations of a move like this. Either all the content is in the browser and being read to a user; or, it's being loaded on-demand, which means you should notify the user that the interface has changed...something you get for free when using a separate page. (I sometimes think the modal is the new target="_blank" of the Internet. "We don't want users to leave the page because they might not come back!")

As to the point regarding heuristics, I don't know what references you're using there.

Directly to the questions.

  1. I think it's fine to provide gesture-like experiences on non-gesture devices, but the experience should be relatively the same. If it feels like scrolling to a user on mobile, it should be able to feel like scrolling on desktop.

  2. Swiping technically is scrolling, one just has a specific stopping point while the other doesn't. However, from a language perspective, (Apple at least) tends to differentiate between a mobile experience and a desktop experience, but that may be more for developers (click versus tap, scroll versus swipe, and o son). Desktops don't have "swipes" - they have scrolls; therefore, if I'm not on a device with swipes (or your desktop experience doesn't allow for that feeling) then you're lying to me and, as a user, I'm not thrilled. So, I would say, no, using the term "swipe" for a desktop experience is a) not necessary and b) not accurate.

  3. I don't know the web app you're trying to develop and can't speak to it...having a modal in general could "break the experience of the web app" depending on the rest of the app. Having said that, some things to consider:

    • Keep it simple: Dribble works because it's not trying to do anything weird. Scroll up and down - everyone knows how to do that. Click left and right - everyone knows how to do that. Wrap on the other hand, trying to use a widget (I don't think they developed that in-house) that "feels" slick on mobile, but is annoying on desktop. (Dribble doesn't even use their modal/lightbox on mobile.)
    • Good UI is like a joke, if you have to explain it, chances are it's not that good. The Mac Pro site doesn't have instructions telling users to "scroll" (outside of the initial down caret). The user expectation is that they can scroll. The site accommodates that expectation. (Then you can geek out about the vertical page view indicator and whatnot if you want to.)
    • Build the experiences around a solid foundation of user expectation instead of trying to force users to change to fit the experience.
    • Cater to your users. Not who you or your bosses think the users might be, but the actual users...get out of the office. Wrap may be just fine because 99.9% of their users only look at the site on mobile; so, having an inconsistent desktop experience is inconsequential. Maybe most of your users are able-bodied, full-vision-spectrum, geniuses so you don't need to worry about button hit areas, color contrast, or the number of items on a screen at a given time.
    • Chances are you don't need to build that UX - it's already been built for you. What problem are you trying to solve? Based on the suggestions in this question you are trying to solve a collection -> detail problem. I have a collection of things users look at. They pick one. They see the details. This is pretty much every experience on a computer...I'm not saying that to be funny, I mean it literally. It's so ubiquitous that Apple provides iOS developers with a view controller to make developing them for handheld, tablet, and desktop dead simple (not design-sexy, but dead simple). Why a modal? Why not make it look like the Mail app? Why not make it look like iTunes? Why not use a cover flow kinda vibe? Why not make it look like Finder or Windows Explorer? ...What problem are you trying to solve? What nuance should you apply?

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.