3 Replies Latest reply on Jul 30, 2009 10:11 AM by Matt Cannizzaro

    Wireframing UI mockups, beta 1 feedback

    Roberto Chaves

      Hi,

       

      I think FC is a great idea and have been playing around with it, when comparing different tools for doing interactive wireframing UI mockups.

      The beauty in having FC is being able to have the UI wireframe design actually be directly reused into the real product, and being skinned and styled and mixed with the live code.

       

      Some feedback and suggestions:

       

      1) Post-it style comments

      It would be excellent to be able to add post it notes with comments in each page/state (like one can easily do in Apples Keynote).

      This would be great to have when sharing a UI workflow design with other team members and wanting to add comments or notes to the current

      design. What I´m doing now is adding the text tool (which is painful at it´s current state, as many others have commented) and changing font color + size to differentiate it.

       

      2) More Wireframe components

      I´d like to see more default components added, like Tab pages, tree view, image placeholder, dialog, stepper,  ballon help, warning message box, radio button group, text editor (rich and normal).

      I think having many of these in place (and maybe with a bunch of skins to pick between) would help many developers wanting to build RIA´s using Flex/Flash.

       

      Check http://www.foreui.com/demos/demo0/ to get some inspiration!

       

      3) Smart Alignment/snapping

      Here too you could look at CAD programs as well as other Adobe products, so that when moving graphics around the layout it would mark

      with lines when the object(s) you are moving align to other components, to left/right margins (and with a offset from the margins too), centers, etc.

      See the foreui.com demo again for inspiration, or CAD programs like Catia which finds all sort of geometric and distance/angular relationships that might be of interest for the user.

       

      4) Hierarchical pages

      If you add Tab pages, then it would make sense (and probably also anyway!) to have some sort of hierarchical/tree structure for the states.

      So if you have a tab layout with 3 tabs and want different states within each tab they should be grouped under on state.

      So that they also can be grouped for easier navigation.

       

      5) Data list, columns?

      The data list can only have rows added. How about making it two dimensional, so that it´s a table?

      To edit the table data I noticed the foreui behaved just as I expected. It gave me a comma separated list, and if I added one more comma I got a new column. This works both for the top headlines row and the data below, example:

       

      Name  Email      Phone

      John    j@j.com  +46123456789

      Eve     e@e.com +134234324324

       

      would be presented in the edit field as:

      Name, Email, Phone

      John, j@j.com, +446123456789

      Eva, e@e.com, +134234324324

       

      And if I add one more element it would automatically expand it that direction.

       

      6) Maybe have some sort of way to visualize transition mappings?

       

       

      I´ll start with this feedback and get back with more, it´s getting late here (03:10 am).

      Looking forward to hear your thoughts on this feedback.

       

      Best regards,

      Roberto

        • 1. Re: Wireframing UI mockups, beta 1 feedback
          Matt Cannizzaro Level 2

          Hi Roberto,

           

          Thanks for the detailed feedback! I have a few questions:

           

          5) You can add columns to a data list by adding a dynamic component to the list's repeated item. To do this, you need to be editing the repeated item, so double click on the list to edit its parts, and then double click on the repeated item to edit it. Then, for example, create some text with the text tool, and finally right click on it and choose Make Component Dynamic. If you then look at the Design Time Data panel, you'll see that a new column has been created. You can also do this with images instead of text. Have you been able to find this option?

           

          6) What kind of information would you like to see in such a visualiztion? Are you interested in the differences between states or which transitions are actually possible in your application (or both)?

           

          Thanks!

          1 person found this helpful
          • 2. Re: Wireframing UI mockups, beta 1 feedback
            Roberto Chaves Level 1

            Hi Matt,

             

            Thanks for your quick reply. And I hope you appreciated the other feedback too.

             

            5) I tried it now and got it to work, thanks! However I notice that once you´ve edited it, the components in it no longer stay attached in a way to allow for resizing (I´m sure you´re aware of this already).

            It still feels a like a overly complicated way to do this simple thing, considering that you do have a Add row button one would logically expect a Add column.

             

            6) I was thinking of some sort of visualization that shows what parts of one state map to other states. In the case when you have multiple pages and are working on defining state transitions you would be able to somehow get an overview to see which are missing and which have been done (as an example having buttons linking to different states).

            I don´t really have a clear suggestion to give on how this could be done, just thought I suggest it more like some sort of brainstorming suggestion.

             

            Some new comments and feedback:

             

             

            7) A tool I just found out about, that is based on Flash, developed by a single guy and is very easy to use for UI wireframing that you should have a look at is:

            http://www.flairbuilder.com

             

            This sort of functionality is what I would like to see in Catalyst, combined with the option of skinning that is coming with Flex 4 and tying it to a back end as you already can do.

            It would be an excellent way of doing prototyping, that could be skinned with Photoshop, Illustrator, re-used into actual production system, and that way really separating the code from the UI, and reusing the UI prototyping into production.

            This tool also has the smart auto alignment guides as I wrote about in my original post.

             

            8) I think most people will expect the double click to allow them to edit text fields and not jump into the datalist/component editor. I would rather have one right click and choose this option, or maybe a tiny icon bar could hoover when a component is selected that gives you options like changing properties or editing the component.

             

            Looking forward to see what exciting changes and new features Catalyst Beta 2 will bring!

             

            Best regards,

            Roberto

            • 3. Re: Wireframing UI mockups, beta 1 feedback
              Matt Cannizzaro Level 2

              Thanks Roberto, this is all very useful feedback! I'll pass your thoughts on to the rest of the team.