Modal Window Concept

Hi webflow addicts,

I think one of the most important things for a good product is the community behind it.
I decided to do a Modal Window Concept to get feedback from users. I did this because it´s one of the most requested features on the forum.

There is a very good tutorial on making an modal window, but… well… you have to publish to test and it´s a more manual work.

Here it is:

Opinions? Feedback?

1 Like

widget icon - could be a better treatment for that

close on “outside” - that shouldn’t even be there. it’s best practice to have that script in your modal code from the start.

open modal when page open - that should DEFINITELY not be there. Modals are quickly becoming today’s version of a pop-up window. I’m seriously considering creating a browser plugin like AD BLOCK to prevent modals from opening without my permission.

FYI - these my own personal opinions, not the opinions of the webflow team.

Hi PixelGeek,

Tks for your feedback.

widget icon - yep, it could be better, but it´s only an example.

close on “outside” - By standard the “close outside” option should be active, but why don´t you want to give the user the chance to change that? What is standard to you, my not be standard to other.

open modal when page open - Definitely don´t agree with you on this one. I got your point, but i think you are being over dramatic comparing a modal window with an traditional pop up (firefox window that opens without the user permeation)
An modal window it´s just html with contend. If the webdesigner want´s to show useful info on a modal window when the site start´s, what´s the problem? That is content running inside the website and not outside.
It´s the same thing like you open a website and a promo video starts to play on the header background. Are you going to say: “Eeeiii, i did not give permission to play this video, i have to get a browser plugin like AD BLOCK to prevent videos from playing without my permission.”

This concept don´t reflect webflow team, this is just a idea that i want to share with the webflow community.

close on “outside” - just wondering, is there any other reason why a user would click outside of a modal either than to close it?

IMHO, you’re comparing apples to oranges with this example. What I’m talking about is when you load up a page and immediately you’re greeted with “HEY! LIKE THIS PAGE ON FACEBOOK!” I get annoyed by modals that auto load. Especially the ones that are set to a 5 second timer.

Real world example if the world was the internet:

User is walking around a mall.
User sees a store he’s interested in.
User opens the front door of the store.
Immediately, store owner appears right in front of the user’s face.
Store owner puts a sign in front of user’s face.
Store owner says “Before you walk into my store, READ THIS!”

If I were the user, I would immediately leave. I don’t know anything about your store. I was only curious and already you are forcing me to look at things that I didn’t come here to look at?

Any who, with a video being used as a header background, it’s not taking away from your experience. If used correctly, it adds to it.

example: Spotify - Web Player: Music for everyone

PixelGeek I think you went to hard on your personal preference. Rui seems to have a good idea here. The modal has been a feature request and its nice to see ideas shared with the community. Personal preferences aside, I think Rui did a good job at explaining something he would like to see implemented.

1 Like

I might have. I just have this weird emotional connection with UI/UX. [I always like to think about the users][1], because in the end, I am one.

[1]: https://www.youtube.com/watch?v=E5KfzyO4feo#t=22[quote=“Jonas76, post:5, topic:2284”]
Rui seems to have a good idea here.
[/quote]

Yes. His ideas are on point and I have a good feeling the WF team have been working on it for a while now. (Good things come to those who wait.)[quote=“Jonas76, post:5, topic:2284”]
I think Rui did a good job at explaining
[/quote]

Yup. I agree to this as well. It’s just that I’m scared of giving users power that can disrupt a users experience. Like I always say “Make the web beautiful.”

2 Likes

This is what i like, people sharing ideas and concepts :blush:

Jonas​76: Tks for the words, but i understand PixelGeek frustration. I´m 33 years old, i have been designing since i´m 18, so i´m used to see fighting when the subject is User Interface. Sometimes is hard to find an middle ground.

For example, the “close modal on page load” option. I agree that is horrible when you open a page and a modal window pop´s up “Do a like on hour facebook page”. This is a bad example of what you should not do with a modal window.

A good example is “crazy 50% discount on plasma TV”, what i´m trying to say is, give the user the tool to make it, but it´s your responsibility to used well or bad.

"With great power, comes great responsibility "… this quote is from a dude´s uncle that jumps from building to building using a quite gay suit :smile:

2 Likes

@PixelGeek and @Rui_Almeida,
I hear both your frustrations! I’m working with enterprise level e-commerce and modals have been a sore subject. Its often hard to relinquish what you know UI/UX has been and what it CAN be. I have daily meetings just trying to make sure the sites we design stay consistent and current, abandoning old web standards (blue underlined links, terminal like UI’s, and atrocious mega e-commerce sites that are somehow still 6 years behind). New usability and patterns are emerging, new resolutions, new media formats. Limiting widgets should be left to the Designer and not the developer. In the end every designer might have a different scope for his project, but he should not be limited to a set a tools based on a different designers opinion. Perfect example is Bootstrap. They had removed support for multilevel menu items, the devs dubbed it to be unnecessary and poor in UI taste. But why remove the choice for the designer? Why limit the ability of such functions? Ultimately who’s choice is it?
And that’s my point. The tools should be there. A good designer will make good use of it. And so vice versa.

Because, some inventions, code, and patterns should stay hidden. Once in the wrong hands, it can get crazy.

<blink></blink>

http://www.montulli.org/theoriginofthe<blink>tag

Haha. I’m not saying you don’t have a point here. Bad web is everywhere, and so is bad design. But I could also argue Picasso vs Sargeant (American Painter) for example. Two completely different approach of styles. Is one or the other bad? I will argue for the sake of argument. I think Picasso’s work is weak. His Blue Period is the closest he ever came to doing Fine Art. But then, because of my bias, should someone of kept a brush from him? Maybe he should of never used the color blue. In the end he is an artist of renown for many reasons, whether I like it or not. I’m sure there are plenty of people who shouldnt touch HTML5 or, god forbid, JavaScript! Oh the mess they would make :wink:

1 Like

and here we have a conclusion =) agree to disagree. variety is the spice of life.

1 Like

Haha reading this is great! @Rui_Almeida thanks for the sweet mockup for modals! Thanks all for the feedback and the discussion.

We’ve been thinking about the best approach for modals. It’s a hard design problem to crack because there’s a lot that needs to be taken into consideration:

  • Modals are invisible elements. They only show up when something is triggered (clicking on a button). Shouldn’t show up in the designer but should still be accessible easily.
  • Modals fill the whole browser viewport.
  • Modals need to be fully editable. How wide the window is, the background color, close icon, etc.

So there’s a lot to consider when trying to figure out how to not just allow the designer to show and hide the modal at whim but also to be able to select different parts of the modal and style it. We can have something like what you have, but it would show up in the assets panel (where symbols are now) or we would have them as “special page types” in the pages panel.