WYSIWYG Design in the UX

[DickJames]

We use an Alpha desktop application based on dbf files that we have developed over the past ten years. We would like to convert it to a browser based application using SQL, and we have converted the dbf to SQL already. However, re-creating the screens using panels and containers seems cumbersome because of the lack of WYSIWYG. I watched an alpha video about absolute layouts which appear to be able to be created with WYSIWYG. Evidently the disadvantage of absolute layouts is that the sizing of the controls is fixed and thus, the screen is not responsive to different window sizes. Is this correct?

Would it be possible to create the screen as an absolute layout, and then convert all the fixed sizing to percentages of the containers? Does this make sense? Would it save any design time? Does anyone know how to do this?

[mikeallenbrown]

Re: WYSIWYG Design in the UX

The live/working preview is your WYSIWYG. Is that not what you were expecting? Why do you feel you need absolute containers? Also, what version of Alpha are you running and is this a web app or a mobile (phone gap) app?

[Davidk]

Re: WYSIWYG Design in the UX

Access and other environments had/have true WYSIWYG, and Alpha Desktop was close but somewhat archaic. OutSystems is WYSIWYG... and works well for very simple designs but devolves into chaos with anything more than about six controls on a screen.

Trying to do an end run around Alpha's non-WYSIWYG environment will be a waste of time and I'm not sure it's something you'd want to do anyway. The concept behind all this stuff is the ability to set controls to shrink and grow with devices and orientation. Unless you're designing for 1 specific device and screen size, then WYSIWYG can't really help you.

If you place 2 controls side by side in the designer and each is 50% width, then how will a WYSIWYG designer help you see that layout for an iPhone X and an iPad Pro?

Alpha could build a WYSIWYG designer that lets you select an approximate target... as in Live Preview... but currently Alpha can't even get it's new property grid to stop wiping out settings.

TransForm goes a tiny bit further but it's really only an automated Live Preview.

Don't waste your time trying to do something that will ultimately frustrate you and fail. Learn how to work with UX control placement and Live Preview. Live Preview gives you the ability to instantly switch devices... and that's as close to WYSIWYG as you'll get.

[DickJames]

Re: WYSIWYG Design in the UX

David & Mike -- Thanks for your responses. We are working with the latest released version (at this time) of Alpha,version 5581. Here is the video where Selwyn demonstrated the absolute layout WYSIWYG capability.

https://www.viddler.com/v/bdeffe6c

To me, WYSIWYG means you can drag a control from a list onto a work space and you can (sort of) see what it will look like. Alpha's desktop design environment works this way. Creating a long list of panels, containers, and other controls, and then pushing a button to see how they will display is not WYSIWYG.

Our desktop application is used in 35 different locations. I think most on this forum understand why we would want to move from supporting 35 locations to supporting one browser-based location. Thus, we are not initially trying to develop for small tablets or cell phones. We expect our screens in the browser to normally be maximized, but different users have different screen sizes, so responsive design has appeal. Our screens are very information-dense, which means that a typical UX may have dozens of controls.

We will continue to work with the methodology Alpha has given us, but I am finding the positioning of controls on a screen to be a little cumbersome.

[Davidk]

Re: WYSIWYG Design in the UX

That video is 5 years old. I think you'll find that the absolute layout container will provide far more grief than benefit. It's original focus was to design an input form around a static paper form... with that static form used as a background. Working this way as a general rule will not allow you to properly support variable screen sizes.

You're also going to find that mobile devices running your web-based application will be a natural extension for your users... even through desktop browsers will be your main focus.

You just need to work with the UX and it's available containers... get used to it... and use Live Preview often to ensure you're getting what you want. Most of the time you can refresh Live Preview running in a browser. Once you get into more complex designs... e.g. using security... then publishing locally and refreshing will allow a fairly quick workflow.

[CharlesParker]

Re: WYSIWYG Design in the UX

While there isn't a traditional WYSIWYG designer in AS, you can use a story board to design the layout FIRST then incorporate your data entry/CRUD operations. I think story boarding the project should be done outside of ANY rad tool for applications. I use a piece of paper to start out, but there are many programs out there strictly for that purpose. I like to look at other ideas and develop from there.

In AS you can use responsive rule sets and multiple layouts for lists so that you can easily already "know" what the design is going to be and sort of get rid of the idea of WYSIWYG as a thing of the past.

Build a WYBIWYG - what you build is what you get...

I know some people will reject the idea because WYSIWYG is "easier" but if you start thinking in terms of WYBIWYG I think you will find designing an interface much easier AND resulting in a more user friendly application.

If your looking for modern design ideas try here: https://pttrns.com/

For me, it is all about story boarding the idea then add in the actual CRUD stuff. I didn't start off that way but more and more this seems to be the best way for me to work, and I think my applications are getting better over time as I rethink them. I came into AS with the WYSIWG mentality.

Hope that helps!

[DickJames]

Re: WYSIWYG Design in the UX

Charles -- Thank for your reply. We have used story boarding in the initial design for the development of mobile add-ons (apartment inspections) to our desk top application (apartment management). However, since we already have a successful desktop application, I don't see the advantage of redesigning the desktop screens with story boarding. We simply want to re-create the desktop screens as reasonably similar browser-based screens with similar functionality. We are already part way into this process, but I had hoped there would be a WYSIWG design approach that might save some time.

I looked briefly at https://pttrns.com/. It appears to me to primarily offer ideas for mobile devices, which is not currently our primary priority. Thanks.

[Peter.Greulich]

Re: WYSIWYG Design in the UX

Richard,

Sounds to me like you know what you want. But, as others have pointed out, you'll find yourself banging you head against the wall if you try to circumvent the "Alpha' way. It's a tool. It has a certain methodology and logic to it. Follow the tool's lead and you will make progress. Try to bend the tool to your will and you might not be so lucky. It's a learning curve. The web is not the desktop. HTML doesn't exactly follow desktop layout design. But you can get get pretty close. The more practice you have with containers, frames and other UX elements, the easier it becomes. Honestly, the web stuff I have built is far more intricate and complex than anything I ever build on the desktop - and I go back a long way. It's not easy, but it's powerful. Alpha is a flawed product, but a really flexible one. There's a ton of power in that flexibility.

[DickJames]

Re: WYSIWYG Design in the UX

... It's a learning curve....

Peter -- I certainly agree with you. It's definitely a learning curve, and I do find developing for the web to be more complex. I plan to stick with it, but obviously I'm looking for shortcuts.

Years ago, (2004), I looked at FileMaker and Access to convert the apartment management software I had written for a TRS80. I chose Alpha because it appeared to greatly shorten the time necessary to develop an application compared to the alternatives. I certainly would not use Access or FileMaker to re-write my desktop application for the web. However, my sense is that there may be other rapid application development environments for the web, and that Alpha may not have the competitive advantages it once did.

[CharlesParker]

Re: WYSIWYG Design in the UX

All I do is web (and phone gap) development with alpha - If you ask me Desktop has a huge learning curve!

[kkfin]

Re: WYSIWYG Design in the UX

All I do is web (and phone gap) development with alpha - If you ask me Desktop has a huge learning curve!

Actually desktop applications and phonegap apps are basically same. You install both in a device. Today you can build both using same skills.
So is also with Alpha.

[Davidk]

Re: WYSIWYG Design in the UX

Richard, I think you'd find that the marketing departments of those other web rapid application development environments are running full tilt and promise far more than they could ever deliver. For very simple applications they may be correct... but who has ever created a simple application.

Alpha's competitive advantages for web and mobile are somewhat concealed because Alpha management and marketing can't figure it out how to position it. However, once you start working with it... and I mean for months... you'll see it's flexibility and depth. Unfortunately, Alpha continuously attempts to shoot you in the foot with rapid releases and untested code. However, you get used to it after a while and learn when to stay with a release that works and be wary of new releases before you thoroughly test them.

I've not come across another environment that offers the depth Alpha does... and I've looked... and continue to look... a lot.

[Jonathan Freestone]

Re: WYSIWYG Design in the UX

You are absolutely right to be questioning if Alpha is the right way to go, you should do this for every project.

We started looking for a Rapid Application Development (RAD)/lowcode environment in 2016 after a consultant demoed another solution to us. We looked at the following in detail and did a test project in each.

• Outsystems - licensing was a bad fit for us.
• MATS https://www.matssoft.com/
• Bizagi
• AlphaAnywhere

Alpha one hands down and has improved greatly by then. Id say it took us a year to get our heads working in the "alpha" way, getting used to solving the problems the Alpha way takes a little bit of practice.
We also had some mentoring from another Alpha based company Start Software, I know they are busy right now but it moved our learning on heaps.

We came from a Visual Studio background, but now we do 90% of our development in Alpha paired with SQL Server.

Fixed layouts built for the desktop are great for rapid data entry. But question why does that data even need entering? it probably came to the business electronically, could it be imported?

Desktop is what your users have today so that's what they use. But what do they want to use? what could they use? what will they be using in 5-10 years time? I can see Android making big marches into the business environment. We have started making everything mobile first where possible or at least mobile friendly. Our users can now VPN in on their phones/tablets and access our applications. That's started to change the way people can work.

[WebDesignShop]

Re: WYSIWYG Design in the UX

Hi Dick, It's Sean. There really isn't a good way to do WYSIWYG with Alpha controls. You can integrate a WYSIWYG html piece into your development process so that you can customize the "THEME" of your web application. That way you can use any HTML tool to develop the look and feel of your application as a "wrapper". I can do a demo for you and walk you through that. It will make sense once you see it. But doing the layout of controls in a UX with WYSIWYG isn't going to happen anytime soon. I agree with the above assessments though, Alpha Anywhere is still the way to go, especially for web/mobile capability.

[lvasic]

Re: WYSIWYG Design in the UX

At this point, I think WYSIWYG would actually slow me down. As I'm putting controls on the UX I can visualize them and where they are going to go. I now think in terms of the percentage of the screen. If I have three text boxes and I want them all on the same line I will make them 33% each. In fact, Alpha has a little tool to make this easy. The paradigm shift is in terms of the design unless you really want it fixed, then you can. It's all about being dynamic. The data should be dynamic, the screen layout should be dynamic, even the labels, colors and backgrounds can be dynamic. It will take a little bit longer to code it initially, however, maintenance is a thing of beauty.