1 2 Previous Next 21 Replies Latest reply on Sep 9, 2016 7:00 PM by chiweez

    UI Prototyping Resources

    mikebeargie

      I've seen a few developers starting to prototype their projects in mockup software before taking it into Filemaker. Rather than debating the value of that, let's discuss some of the mockup utilities out there. I'd like to bookmark this as a resource for other developers as to what prototyping to use, I'll add to the table below based on people's comments about what they use. So please share your experiences with UI prototyping software

       

      NAMEPLATFORMSPRICEADVANTAGESDISADVANTAGES
      FilemakerMac / PC$299obvious choice if you're skipping mockups. Making your "mockups" here will mean you're done with the work later, and not doing a mockup AND filemaker development. Might also help to design CWP layouts.Not really designed for UI mockups. Takes longer and is much more complicated for prototyping. Limited annotation. Pricy for just prototyping (if you have designer-only users)
      Balsamiq MockupsMac / PC$79Robust prototypes. Ability to link mockups to create a true "mocked up" applicationmedium level learning curve to take full advantage.
      SwordSoft layoutMac / PC$6.99cheap, similar features to balsamiq, has freeware versionNo integrations (IE google drive) like balsamiq.
      MoqupsOnline$9-$39/monthOnline app, so easily accessible by entire team from anywhere with no extra software install.ongoing subscription pricing could add up over time
      lucidcharts.comOnline$0-$21/monthgood for flowcharts / ERD, allows group account, mind-mapping. Online access.Geared towards flowcharts more than prototyping
      draw.ioOnlinefreeconnects with google drive, good for flowcharts / ERDGeared towards flowcharts more than prototyping
        • 1. Re: UI Prototyping Resources
          wimdecorte

          An important point: by using something *other* than FileMaker means that the client or any other non-FM techie can contribute.  So this can't be just a comparison o FM vs prototyping tools.

           

          I use Balsamiq.

          • 2. Re: UI Prototyping Resources
            thirdsun

            I really like Moqups: https://moqups.com/ - completely web-based and therefor always available, fast, and with premium features in case you become serious with this app. Otherwise it's free and readily available to try.

            • 3. Re: UI Prototyping Resources
              fitch

              I ♥ wireframes

               

              Gui Prototyping Tools

               

              22 Good Prototype and Wireframe Tools

               

              I've also heard good things about "a pencil," whatever that is.

              • 4. Re: UI Prototyping Resources
                mikebeargie

                Have you ever used any of these tools yourself? Mostly interested in learning the pros and cons of things people have used with filemaker development (and not just keep another list of tools).

                • 5. Re: UI Prototyping Resources
                  fitch

                  I've tried a few, but the only one I ended up using for a project was OmniGraffle. There are quite a few template collections available for it. I do like the look of hand-drawn wireframes, because I think it helps the client keep in mind that this is only a sketch, it's not set in stone.

                   

                  TBH, most of the time I just start building in FileMaker. Most of my projects have similar needs: some kind of menu bar at the top, chunking similar data together (e.g. Name and Address), and off you go. Even for more specialized projects, I find FileMaker generally a serviceable tool for UI design, with the advantages you listed. Not sure I'd agree with "Takes longer and is much more complicated for prototyping."

                  • 6. Re: UI Prototyping Resources
                    mikebeargie

                    "Takes longer and is much more complicated for prototyping."

                     

                    Give filemaker to a designer that's only ever worked with Adobe Creative Suite and you'll soon agree with that statement.

                    • 7. Re: UI Prototyping Resources
                      fitch

                      I though we were talking about tool that we (FileMaker developers) use, my point being that I can work very fast with this tool I know very well. If you're throwing in a designer who is fast with Adobe Creative Suite, then we are having a different discussion.

                      • 8. Re: UI Prototyping Resources
                        BeatriceBeaubien

                        Hi Mike,

                         

                        I like Balsamiq Mockups.

                         

                        TBH I agree with Tom Fitch. I tend to dive into FileMaker immediately. But sometimes I regret doing so, and wish I had thought through and presented Balsamiq Mockups based on a storyboard (or multiple story boards) before presenting a FileMaker "prototype".

                         

                        The benefits of crude mockup prototypes are:

                             • They communicate that they are "for consideration, not final".

                             • They permit ideas to flow more easily and that the parties aren't wedded to the developer's initial vision.

                             • They allow the developer to quickly develop a number of prototypes, which is ideal. Once we present a FileMaker database, even if we are thinking of it as a prototype, it tends to become the de facto basis of the solution.

                         

                        To address your question, here are a few scenarios in which I find Balsamiq invaluable:

                             • A major project sponsor describes in detail numerous roles and suggests they are super-easy to accommodate, without representative stakeholders around the table. This will require a number of very rough prototypes to get feedback from team members in the specific roles.

                             • There is a lack of coherence in the workflow. An example would be stakeholders around the table communicating conflicting views of what their tasks are. And sometimes everyone is nodding their heads when the conflicting scenarios are presented. It indicates clarification through step-by-step rough prototypes is needed.

                             • Stakeholders are describing their perceived needs, rather than their workflow. Often they are basing it on the last technology they had to use for the task (Excel spreadsheets, 20 year old FileMaker solutions, etc.). Once they see a very rough alternative, they can begin to be more openminded about how dramatically the solution will vary from their previous experience and describe more clearly what they are trying to accomplish.

                         

                        Often, some aspect of all these scenarios are present at the same time.

                         

                        Defining the project is all about the tasks, not the technology, and that is what Balsamiq Mockups is good for.

                         

                         

                        Bottom line:

                        Workflow is not the same as the structure of the database. However it is the most important aspect to identify and nail from the start. Distinguishing workflow and communicating it through rough mockups articulates the objectives of the project, easing the development of specifications and hence the data model. Balsamiq permits you to invest a very short amount of time in making sure you have the workflow down before you do the data model. This is particularly important the more stakeholders are involved, the diversity in their status in the hierarchy, and less clarity there is in the project.

                         

                        In reference to your initial table, I'd disagree that Balsamiq has a medium learning curve. It's easy to take on board.

                         

                        A couple of years ago I suggested to Heather Winkle that we have a Balsamiq-like skin on FileMaker to message that the suggested ideas were rough and prototype-only. I still think it is good idea.

                         

                         

                        I hope this helps.

                         

                         

                        All the best,

                         

                         

                        Beatrice Beaubien, PhD

                        i2eye, Toronto, Canada

                         

                        FileMaker Business Alliance

                        FileMaker 12 Certified Developer

                        Knowledge Translation Certified Professional

                        • 9. Re: UI Prototyping Resources
                          mikebeargie

                          Thanks Beatrice, great post!

                           

                          My "medium level" learning curve was based on some of the more advanced features that Balsamiq has, such as the ability to link slides together to create a quasi-functional mockup (which is an AWESOME feature by the way). Also, if you've never used flowchart/wireframe/mockup software before (IE omnigraffle, visio), it might be harder to learn than a "completely basic" mockup utility.

                           

                          Having some sort of mock-up utility built-in to Filemaker would indeed be awesome. I wonder how hard it would be to create a Balsamiq -> Filemaker convertor? I can only dream of a utility that would automatically create tables, fields, layouts, objects and navigation scripts based on a full balsamiq project.

                          • 10. Re: UI Prototyping Resources
                            mikebeargie

                            True, but Wim made a very valid point that using something outside of Filemaker opens the opportunity for a designer or other non-filemaker developer to get involved. As a Filemaker developer, you should be considering the possibility that you'll probably eventually end up in a project where mockups are needed, and the client has a designer that has never used Filemaker.

                             

                            As noted, I didn't really want to debate the merits, I only want to keep this as a resource for future developers to point to.

                             

                            Personally I've started using SwordSoft, as it's cost of entry is as much as a starbucks frappucino, making it easy for me to pass work on to client designers if needed. It's also (almost) as powerful as Balsamiq. Since I had never done any mockups before, when I compared it to Balsamiq, I found that SwordSoft had an easier to use interface.

                             

                            In the end, there is probably no wrong answer as to what to use.

                            • 11. Re: UI Prototyping Resources
                              flybynight

                              A couple of online tools that I have tinkered with, but wouldn't say that I have actually "used" them for any real projects. Just keeping them in the back of my mind for when the need arises. (I'm bookmarking this thread as well!)

                               

                              www.LucidChart.com - various levels of fees from free - $10/month, plus "team" packages.

                              Someone on this forum used it for an ERD. Sorry I don't remember who to give proper credit.

                               

                              draw.io - free, integrates with Google Drive, or can save locally as an XML file. Tons of template objects, including ERD/UML stuff, iOS UI stuff, etc.

                              I heard about this on the "FileMaker Sucess Tips" podcast.

                               

                              Thanks for starting this list!

                              -Shawn

                               

                              Message was edited by: flybynight to give credit to FMST podcast.

                              • 12. Re: UI Prototyping Resources
                                psijmons

                                I use Balsamiq and completely agree with Beatrice, it is a great tool to get discrepencies in worklfow to the surface at early stages.

                                This beats re-engineering in FMP and eventually saves a lot of time.

                                 

                                Also, once the mockups are approved, I let the licensee sign them off, so any function-creep (which always comes) will be billable with little discussion.

                                • 13. Re: UI Prototyping Resources
                                  mikebeargie

                                  Thanks Shawn!

                                   

                                  After checking it out, I'm going to mark lucidcharts.com as having a disadvantage of being geared more towards flowcharts rather than mockups. Although it demonstrates that mockups are possible, it seems that charting is more of it's thing. Just wanted to distinguish that the list here is geared specifically for mockup resources.

                                  • 14. Re: UI Prototyping Resources
                                    mikebeargie

                                    That's another good use-case scenario for why mockups are valuable.

                                     

                                    Do you have any idea how much time/cost you've saved (from your business's side) in terms of preventing scope creep and charging for approved changes?

                                    1 2 Previous Next