DEV Community: Franz Rodenacker

Applying Nielsen's Usability Heuritics in Design

Franz Rodenacker — Thu, 09 Sep 2021 13:34:12 +0000

The problem is there are no simple “right” answers for most Web design questions (at least not for the important ones). What works is good, integrated design that fills a need—carefully thought out, well-executed, and tested. - Steve Krug

One of the difficult things in UX Design is that there are very few hard and fast rules designers can follow to make any specific design useful or easy to use. What is the correct task flow? What controls will our users need? Can they efficiently operate them? How should we layout our screens so users can be efficient? How can we make sure we can find all the functions and features they need? While this feels like a standard list of questions designers ask before starting to get creative, there is no definitive answer for any of these questions. For every project and screen, we need to find solutions specific to the context of the project, the users, and their tasks.

However, designers can all follow many laws, rules, and principles that can help us avoid some mistakes. One handy list of principles was compiled more than two decades ago by Jacob Nielsen. He described ten heuristics for interaction design that every UX designer should probably know. Wikipedia describes them as “... strategies derived from previous experiences with similar problems”. So, Heuristics are loosely defined guidelines for problem-solving and are not guaranteed to be optimal, perfect, or work in every situation. Nevertheless, Nielsen heuristics are general rules of thumb we use to guide our design decisions.

Here is an example of how we applied Nielsen’s “Match Between System and the Real World” principle when creating the Linx Designer.

Match Between System and the Real World

The Linx Designer is a visual backend, integration, and automation programming environment and low-code IDE. So, when we started designing it, one of the first questions we asked ourselves was what a “match between the system and the real world” actually means in the context of Linx.

The competition seems to widely agree that backend applications, data processing, and automation should be represented with views that look like workflows. Here users develop their applications by connecting various blocks on a free-form canvas. The data flows along with the diagram and is processed in each block.

However, while a workflow diagram does an excellent job at representing simple process flows for marketing materials, real-world applications can quickly become extensive and very complex. We were concerned that workflow diagrams would become too messy and not scale well enough for serious applications. We wanted to make sure our users could keep the overview even in very involved applications.

The target users for Linx range from professional developers to business people with some programming experience and knowledge of coding concepts. We expect that such people have used IDE’s to code applications before and possibly know one or two of them reasonably well. So making them develop applications in a workflow designer did not feel right. Instead, we wanted to design something more familiar and make them feel like they were still programming an application. We also wanted them to organize applications they developed in Linx in the same way they would think about and arrange them in a coding environment.

So, we decided that a match between Linx and the real world means that Linx should look and feel like an IDE rather than a workflow designer. A low-code application development environment is also an IDE, and we decided that Linx should have more similarities with IDE’s. This design approach should help to bridge the gap between developing by writing code and developing using low-code. In Linx, they could feel that they were programming applications, just on a higher level and without writing any code.

So, the concepts we created in the Linx Designer and the terms we use to describe the concepts developers use when coding applications. The terms we use to describe these concepts are terms used in programming.

In Linx, users create custom functions with inputs, called parameters, and outputs called results. Functions are used to encapsulate functionality, as they are in code. Functions can also be nested and call each other to create functional hierarchies and simplify developing very complex applications.

Each user-created function opens in a tab in the center of the IDE. Users program a function by dragging and dropping other functions into sequences. The sequences users create look like high-level code. The logic is built from the top down. We use indentations to denote function scope, just like many programming languages and code editors do.

To make development quicker, Linx comes with a large number of pre-written functions. Some of these functions are very generic, like CallRESTHost, which can be used to call any REST endpoint. Others are specific to an API, like all the Amazon S3 or Google Drive functions that enable users to quickly use the specific endpoints by these services.

These functions are contained in sets we call “Plugins.” Plugins are NuGet packages and include libraries with pre-written functions. When writing this article, we had released almost 40 plugins, each catering to a different technology, resource, or API. Plugins are picked from a list and added to a solution. Adding plugins to a solution in the Linx Designer is like referencing namespaces or importing classes in other languages, like import in java and python or using in C#. Once added, the premade functionality therein can be used in the application.

We also created a typing system, strings, integers, dates, and so on that are used to store in-program data. Users can combine these simple types to create complex ones. Individual plugins can also have types. Internally, Linx handles all data in JSON already anyway, making it easy to work with REST services like the types they expect can just be dragged into a function and populated with data.

Finally, we created services that listen to events and initiate the execution of the functionality. The most straightforward service is our Timer. It has one event called TimerEvent that the service fires at specific times or intervals, as configured by the user. Users define the logic they want to execute when the event fires in the TimerEvent. Another popular service is called RESTHost. It contains various endpoints that contain the logic to process incoming calls.

The upshot

Modeling Linx after IDE’s rather than workflow designers was an excellent strategy to choose. Staying close to the programming world allows our target users to get familiar with the concepts in the IDE quickly and helps to flatten the learning curve considerably. In addition, the design will enable users to follow sound programming principles, like the single responsibility principle, DRY (Don’t Repeat Yourself), or the separation of concerns principle, and enables Linx applications to scale well even when applications become large and complex.

References

10 Usability Heuristics for User Interface Design
https://www.nngroup.com/articles/ten-usability-heuristics/

How to send your html form to Google Sheets for free

Franz Rodenacker — Fri, 14 May 2021 12:31:58 +0000

Google forms are great. They are easy to create, free, support a wide range of fields, are easy to embed and responses can be stored in a Google Sheet without any setup hassles. But what can you do when you want your form to look like the rest of your website and not like a Google Form? What if you want to do your own validation and host the form on your site? How can you still collect the form submissions in a Google Sheet without having to pay?

In this case you do have a few options. One option is to write some code to submit your responses to Google Sheets via the Sheets API. Setting this up is not necessarily simple. It firstly requires you to configure a Google sheet to accept API calls, which can be surprisingly tricky to get right. You will also need some Javascript expertise and knowledge of the Google Sheets API to post the data to. A quick Google search reveals a lot of sites that have recipes you can implement if you feel up to it. But be careful when you make your selection. Not all of these scripts are up to date and when Google decides to change things on their end your script might stop working.

Another option is to find an alternative forms design site, a competitor to Google Forms. While there are plenty of these services most of them work like Google Forms. They usually don’t let you create your own forms or host them on your own website. Like Google Forms, these services often let you use iFrames or something similar so you can make it seem like the form is hosted by you, but the experience is generally not quite the same as hosting it yourself and the look and feel customisation options tend to be restricted.

A third option is to use a service that specifically caters for the submission of custom, self-hosted html forms to Google Sheets. I found a few sites that provide this service and decided to give them a test run. I was looking for a way that I could host my own form and have complete control over how it works and looks. I also wanted the integration with the forms engine to be super simple and easy to implement. Lastly, I did not want to pay anything and wanted all of this for free.

Unfortunately, I did not find such a service and all the sites I did find disappointed me in some way. While most of them have a free tier, this tier always comes with limitations. Some restrict the number of forms you can use, others the number of submissions they allow. Some direct the website visitors to their own site after a form submission and none of them caters for file uploads. All of them require you to sign up and getting started is often way more complex than it should be. Some of them don’t even link your form straight to a Google Sheet, but use third party integration specialists, like Zapier, to submit forms to Google sheets, which forces you to sign up to the third party and configure another integration there.

This is how I decided to build a forms service that gives users everything I was looking for. The idea was to create a service that

Stores form submissions in Google Sheets
Is completely free to use
Is super easy to set up / get started
Supports all HTML form fields - including files
Allows website designers and builders complete freedom in creating any form they wish

I called it Form2Channel (https://form2channel.com) and I am launching it today. All you need to do to start using it is to
Point your form action property at https://form2channel.com
<form action="https://form2channel.com" method="POST">

Add a hidden tag with the sheet editor email
<input type="hidden" name="formto_googlesheets" value="me@email.address">

When site visitors submit the form you will get a link to the sheet via email. That’s all. In the background, is a simple PHP script that collects the form fields and submits them to a REST API. That API adds the responses to the Google Sheet and sends the link to the email in the hidden tag. Here is the documentation for Form2Channel.

You can add multiple forms to a website and multiple recipients to a form. You can create your form any way you like and use any form field HTML supports, including files. You can send your forms to Google Sheets and also via Email, Slack or Telegram. You can create your own thank you page and your visitors will never have to know you are even using Form2Channel. You get all of this for free and you don’t even have to sign up with Form2Channel to use it.

Here is a quick review of some other services that let build and host your own form and cater for submissions to end up in a Google Sheet

Sheetmonkey.io (https://sheetmonkey.io)
This is a specialist in submissions to Google Sheets and their platform is full of well-documented features. Their free tier has a decent 5 forms and 500 submissions limit and they provide simple submissions counters on their platform.

However, free tier users are not notified of form submissions when they occur and they don’t offer submissions to other channels on free accounts. So, you will need to remember to log into your sheet on occasion to check for new entries yourself. If response time is important to you, this may become somewhat cumbersome.

Usebasin.com (https://usebasin.com)
The free tier on this Service only allows for 1 form and it also uses integrations with Zapier or Integromat to submit forms to Google Sheets. The third-party integration makes the setup more complex, because you also need an account at the integration partner and configure the integration to get your form to end up in Google Sheets. You can export all submissions to Excel or CSV and they provide analytics for each form with submission rate and unique submission reports. You can also set up multiple notification emails per form.

However, there are some confusing limitations on the free tier. Every form must contain an email field and the address added there is used to de-duplicate submissions. The reason for this limitation is difficult to understand and it makes the forms inbox somewhat confusing. You will also have to live with the standard usebasin thank you page, which can feel a bit like you are showing your visitors an advert.

Formspree.io (https://formspree.io)
This platform allows for unlimited forms on the free tier, notifications to two separate email addresses and form submissions are stored on the platform for 30 days. It also has a rich feature set and caters for submissions to Trello, Stripe, Discord and Slack on their free tier. The platform further comes with a set of templates that make setting up forms quick and easy.

Disappointingly, an integration with Google Sheets is only available on one of the three paid tiers which start at $10/month and for some reason drop you back to only 10 forms. A custom thank you page also only comes with a paid tier, leaving you to advertise this platform to each visitor who decides to submit a form on your site.

Formcarry.com (https://formcarry.com)
Next to notifying an email address of a new submission, this service also allows for the setup of a webhook per form as an additional integration point. This essentially acts as an additional http channel and can be used to integrate the platform with other systems and API’s. Another special feature of this platform is that they provide the raw form submissions in Json via an API call.

However, the platform also provides the Google Sheets integration only via Zapier and I found the setup somewhat complex and confusing. The free tier limit of 1 form and 100 submissions compares well with those of the other platforms, but for a custom thank you page a paid account is again needed.

Formkeep.com (https://formkeep.com)
The management application for this platform is possibly the most extensive of all the services reviewed there, but at the same time it is also the hardest and most confusing to use. When setting up forms it is frustrating to discover that few of the features the platform provides are available to free tier users. Unfortunately that includes the Google Sheets integration as well as the integration with all other channels on offer. The free tier limit of 50 submissions per month is on the lower end of all offerings, form submissions are only being stored on the platform for a limited time and there is no custom thank you page.

On the plus side, the platform boasts a visual form builder and for paid accounts there seems to be a wide set of features available that include email campaigns, custom replies and a decent set of integrations.

Form2Sheet (https://form2sheet.com)
This site specialises only in form submissions to Google Sheets and their “no frills” service seems incredibly simple and easy to set up. Their free tier does, however, only allow for 1 form with 4 predefined fields, sends only branded emails and does not cater for a custom thank you page. There is no documentation either, leaving users to find out for themselves what to name their fields and that those names are case-sensitive.

Here is the raw data I used to compile this article
https://docs.google.com/spreadsheets/d/1Vo1dv3iO1tgnnx9GTnVjKsOEB4XUJRxaSbh4t7hHZhc/edit?usp=sharing

Have I missed a service? Should I have mentioned another feature? Let me know in the comments.

My top 8 dev tools for 2021

Franz Rodenacker — Thu, 07 Jan 2021 15:32:09 +0000

As developers we are always worried that we might be missing a trick to do things faster and better. It’s developer FOMO and probably made you click on the link to this article. Here is the list of development tools I will be using in 2021. Perhaps there is a trick here that you want to try in 2021.

Frontend

VSCode
In the last couple of years I have come to love VSCode. It is basically a lightweight text editor on steroids. There are a ton of extensions available that can help to enormously speed up your development. VS Code supports a long list of languages and technologies. I develop frontends in VS Code using HTML, CSS, SVG and Javascript.
https://code.visualstudio.com/
Chrome Dev Tools
When creating a web frontend, there is nothing better than tweaking and debugging your HTML, CSS and Javascript directly in a browser. Browsers can show you the impact of a change immediately, thereby saving massive amounts of time otherwise spent waiting for builds to complete. I use Chrome, but Firefox, Edge and a host of other browsers also deliver excellent debugging tools.
https://developers.google.com/web/tools/chrome-devtools
Apache
For many years, my web server of choice has not changed. Apache is very stable, fast and lightweight. There are free versions for every platform and a massive amount of articles, blogs and community posts on anything you want to find out.
https://httpd.apache.org/

Business Logic

Linx
Low- and no-code tools are all the rage at the moment, but I actually enjoy spending time on carefully handcrafting feature-rich frontends. Linx is a backend low-code IDE and server that allows me to create secure REST APIs and all the backend logic for my applications quickly and easily. Linx frees me up to do what I love, namely creating enjoyable experiences for my users.
https://linx.software
Postman
Postman provides a very good set of tools for API development, debugging and testing. The interface of the desktop client can be somewhat confusing at times, but when used correctly, there are few API tools out there that can compete. I use Postman to debug and test the REST APIs I create in Linx.
https://www.postman.com/

Data Layer

MySQL
I don’t expect that MySQL really requires an introduction, but, if you are really not familiar with MySQL, you should take the time to try it out. MySQL has been around for many years. It is very stable, extremely fast and powerful as well as totally free. I use other databases too, but MySQL is my database of choice.
https://www.mysql.com/
Heidi SQL
Before I found HeidiSQL, I spent many agonizing hours using clunky, bulky, slow and unstable database management systems. For me HeidiSQL checks all the boxes. It supports a long list of databases, is responsive, lightweight, has a large set of helpful features and great usability. It is also free and open source.
https://www.heidisql.com/

Source Control

Git Git is an open-source distributed version control system. It can have quite a steep learning curve for newcomers and is sometimes challenging to use in large teams. However, once set up, it handles small to very large projects with great speed and efficiency. I use Github for remote code repository. Git and Github can both be used for free. https://git-scm.com/ https://github.com/