As the subject line says, what diagram can I use if I want to describe a GUI without actually drawing the GUI. I noticed the “GUI” diagrams but drawing GUI’s take too much time and it would simply duplicate the effort. I simply want to tell the programmer how I expect the GUI to behave, how the GUI should be organized, and possibly give hints on implementation. I used to do this using pen-and-paper, drawing a very ugly and unrefined version of the GUI, paying attention to structure and ignoring proportions.
Example: Let’s say I’m working on Windows XP and I want to tell an programmer how to make the GUI for the Windows Explorer. Let’s say I want the version with the folders list on the left and the detailed pane on the right. I’ll need to tell the programmer I want him to place an Tree control on the left, give him hints on how to program that using the underlying data structures, tell him that I want an ListView on the right and that the list view will have an variable number of columns. Again give hints on how to implement the variable column list. Coding hints are best given using links to class diagrams, or flow diagrams where needed. Or simple call-out text balloons.
This is a vague question but I can’t express it any better.
Thank you for posting. You can make use of the User Interface designer to design your UI, even a raw one. I will prepare a movie to show you how to do as soon as I can.
As you see, you can make use of callout shapes for adding your implementation hints. If you want, you also can add reference to other diagrams, such as class diagram, to model the detailed implementation of UI components. You can see I setup the UI with sample data. This function is newly added after we have read your post (You cannot find it yet ), and will be available in the next hotfix. We want to make it easier to build UI through the use of sample data. If you have any suggestions, feel free to raise and we will consider to support more kinds of sample data.
Finally, if you think that User Interface diagram is not desired, you may consider using the freehand shapes. Please read the image for sample.
Hope this helps. Enjoy!
Best regards,
Jick constructing-user-interface-with-path-rectangle.png
I am really looking for more a real life prototype
Eg -how to manage the navigation
- can I export to generated HTML?
Does VP support this?
This would provide me with an easy way to show a demo of the application.
Also the export to HTML would not require to install for each user a VP reader
Also it is a lot closer to a prototype then a document export.
It will be great if you can give us more details about your requirement on the navigation (perhaps send us some example on what you want to do) so that we can give you more suggestions. Feel free to contact me if you need any help.
I mean to be able to export the page in HTML so I can place it on a server and it looks like an application.
No need for documentation just really screeens that are clickable
For example what the tool flairbuilder does, also possible with visio to a certain extend, or iplotz goes also far in this.
Navigation: Indeed between different user interface diagrams (just screens/pages)
Navigation like in the application:
click and here comes the next page
click and the dropdown opens up
click and another tabsheet becomes active
datagrid for search results
in the list user can check the rows and click a button on bottom of screen to export
user can also click on a hyperlink per row to see details
user can also click trashcan per row to delete.
I know I will have to make a several static pages to simulate this behaviour
eg before delete and after delete
but most important is the screen flow. To show from this page you can access following functionalities
As close as possible to the real thing. Then the need for documenting the GUI is not needed, only really the requirements, validations, behaviour on db. I don’t want to write comment “clicking this will bring you to diagram XYZ”
I hope I was able to clear out my requirements
If it could really generate HTML code then we would be able to use the export as a frame to code the real application in
If it is not supported now I would be nice to know if this might be a future enhancement.
Can I upload some generated HTML by visio?
This is just clickable pictures but for presentations options this works good.
Of course this HTML is not reusable.
), and will be available in the next hotfix. We want to make it easier to build UI through the use of sample data. If you have any suggestions, feel free to raise and we will consider to support more kinds of sample data.
