The section layout adjust automatically according to amount of content. They can hide & show elements on stage and change texts and images. I think the design of the controls achieves that playful vibe, And wanted to complete this feeling with the right movement.Įditing Content: The Content PanelUsers edit the content of their sections via content panels. We want to provide a playful, fun feeling. Meaning, at any given state of the section, the controls will be right there. I wanted to make sure the controls are visible in 99% of the cases. We don't hide basic actions under endless menus. Accordingly, I was hoping to find a single, simple and basic rule to solve the positioning of the controls, which will be easy to maintain, dev-wise.ĪDI should be easy to understand for novice users. The builder and algorithm doing the "heavy-lifting". The user should have an effortless experience. Was too complex and hard to maintain.ĪDI is meant to be smart and simple to use. Section control behaviour / Early idea of how the section controls should move. What happens to it when we actually starting to use the product? When Scrolling, resizing screen? What is the default position? I was looking for UX principles to guide me while searching for answers. I quickly found out that the UI suffers from lack of some major definitions regarding section controls (the round buttons around the section) behavior in general. One of my key beliefs when planning UI is to not force it to do things that feels unnatural, just let it flow. I've created a simplified version of the wireframes, and use case by use case started to just let the builder do its thing and see what happens. I started by taking a step back and clear all distractions. One of the first projects I've got under my hands is to take the static wireframes and make them "alive", find the edge cases and suggest solutions. Planning the StageAlthough I was not there when Wix first envisioned ADI, some of the basic planning was still needed. While adding text, the user is focused only on the content and not on the looks, which adjusted automatically. Since we really wanted to simple things down, all text editing is basic like feeling forms. All the editing is made via panels opening from the left, allowing the user to always see his editing changes on the site preview. The builder contains the top bar and site preview. User can play with design, and the layout/colors adjust to ensure site is accessible and well designed. However, users can still "go outside the playground" and edit their site with a more advanced level of customization.ĪDI UX Principles (Partial List) □ Playful:Įxperience should be basic, almost game-like. When defining the UX principles for the product, we describe the builder as a safe playground for the novice users, where they can't "break" their site. User can customize the content and design of his site. The Builder: Stage Behavior and Section ActionsThe builder is where most of the work is happening. Yoga Studio will get "classes", "our teachers", all with fitting text and images. For example, small design studio will get sections like "portfolio", "about us" - with suggested content. We decided that we won't provide generic sections. In order to help our users with content and getting things done fast, ADI sections are semantic. All of this need to be wrapped in fun and easy way to handle, so the user just have to pick pretty designs. Each Section contain content elements (Text, Image, etc), that can be arranged in different layouts (presets). Instead, these are stories on how we built ADI, how we learn from what we do and some of our thoughts about the future.īuilding The Basics: ADI Building BlocksADI-generated website structure is fairly simple. It's hard to sum the work on Wix ADI to a specific feature or two. This article is an in-depth look on the creation and ongoing work of Wix ADI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |