UX Lessons from Weebly
August 26 2014 · Steve Benjamins
Weebly is a joy to use. If you’re unfamiliar with it, it’s a website builder. It’s incredibly easy. You seldom feel lost using it and you rarely spend time trying to “figure out” a task.
How does Weebly do it? Why is it so easy to use? That’s what I want to show you in this post.
I see three important UX lessons that I’ve noticed in Weebly. I think these lessons are worth sharing and hope they’ll be helpful to you!
Lesson #1: Spotlights
Weebly will often spotlight a portion of the interface and dim the website to focus the users attention. This is mostly used when editing complex elements.
Lesson #2: Stay Concrete
Weebly almost always stays concrete by keeping the website preview in view. Any changes to the website happen instantly- Weebly only gets abstract when necessary.
3. Modular Interface
Weebly’s interface always reflects the user’s current task. They are able to do this by sliding the interface in and out depending on the task. Unnecessary options are rarely presented to the user.
How Other Website Builders Do It
If you’re not impressed, you should be. I’ve tried 30+ website builders and I can tell you that Weebly is making the complex seem easy here.
To demonstrate, let me give you a few examples from other website builders that show how quickly abstraction and clutter can creep into an interface.
Jimdo – When customizing the background color, the interface covers the website. Because of that the user is not able to see the changes they are making in the context of the website.
Web.com – Many website builders, such as Web.com, abstract the user out of the visual website builder and into clumsy interfaces like this footer editor.
Webs – Here the user is abstracted out of the visual editor into a modal form editor. The user is not able to see changes as they happen in the context of the website.
Wix – The Wix interface does not reflect the current task. Instead the screen is cluttered with windows leftover from previous tasks. The result is a cluttered, overwhelming interface.
Moonfruit – Here the user is customizing the website “wallpaper” (more conventionally known as a website background). Again, the editor is abstracted out of the website. Changes are not seen in the context of the website.
Furthermore, the interface is cluttered with unnecessary elements. What is the Editor window in the top right? It isn’t necessary to the current task.
Weebly has done an excellent job making their builder easy to use and I hope these three lessons have helped clarified how they do it!