Still using Lotus Notes? Interested in Migrating to SharePoint? Watch my (Dean Virag) interview with Brad Orluk to learn more about why companies are wanting to migrate away from Lotus Notes, obstacles in migrating form Lotus Notes, tools to help migrate, and so much more..
I came upon a stumbling block a few days ago during an effort to re-engineer some old InfoPath forms into Nintex for O365 forms. The culprit was the Choice Field Control. It does NOT work the same in both applications.
Initial Control Display
I got this when I dragged and dropped the choice control onto the Nintex Form for O365 canvas - and was initially stumped. Where are my choices??
Looking at the control's properties, I knew it had more than one choice.
So, I figured that it must be a sizing thing - and I was correct. I was able to see all of the choices by re-sizing the boundaries of the control.
Vertical vs. Horizontal Layout
That's great, but I wanted the layout of the choices to be horizontal, not vertical. That was easy in InfoPath. Each option was separated by a carriage return. Simply deleting the carriage returns between choices produced a horizontal line of choices. Unfortunately that's NOT the case with Nintex forms. In Nintex, you have to do a few more steps.
On the form canvas, double-click the Option control to open the Control Settings dialog window.
From the Arrange choices drop down in the General Section, select Across then down.
Update the Number of columns value to match the number of options that are in the control. In my example, I set it to 3 - because I have three options.
Re-size the control as needed.
Now I the control is formatted the way I want. It's certainly not as easy as deleting carriage returns, but its not too difficult to switch between the vertical and horizontal orientation of a Choice control in Nintex Forms for O365.
I hope this article helps reduce your stumbling blocks when re-engineering from InfoPath to Nintex.
I had a co-worker ask if it was possible to restrict list file attachments to just PDF files. After a quick review of the attachment settings in Nintex Forms Designer O365 I was pleased to report the answer as Yes, and so much more! Here is what I discovered about the Nintex Forms file attachment validation settings.
Below are the default settings of the attachment validation section.
Use the Minimum attachments field to specify whether a file attachment is required or not. A value of 0 in the field indicates that file attachments are not required. A value of 1 or more indicates that an attachment is required. Note: Nintex Forms will automatically add the red asterisk (*) to the label when the value of the Minimum attachments field is set to 1 or more.
Minimum Attachments Error Message
You can provide a customized error message to appear if the form is submitted with less than the required number of attached files.
Maximum Attachment Setting
You can specify the maximum number of files to attach to the form. The default drop down is set to unlimited. If you change it to custom, the Maximum attachments field will appear and is set to 100 by default.
Allowed File Formats
The Allowed file formats field is the one that addresses my co-workers question about restricting file attachments to only PFDs. Enter the file extension for every file type you want to accept in this field. Each file type must be on a separate line.
Disallowed File Format Error Message
You can specify a customized error message if a disallowed file is attached. Below is what the validation message looks like in Nintex Forms for O365.
My co-worker was pleased with the numerous file attachment validations options that Nintex Forms offers.
The principle of Continuity states once the eye begins to follow something, it will continue traveling in that direction until it encounters another object.
A good example is a line with an arrow at the end of it. The symbol indicates that the user should follow the line and see where the arrow is pointing. The pointing finger also provides the same functionality. See Figure 1 below.
Figure 1: Symbols to direct the user's eye toward an object.
The Grid Layout
One of the most common examples of continuity in form design is the grid layout. Grids are most useful in bringing order to a layout, but also useful in indicating context. (Source: Andy Rutlage – Gestalt Principles).
Question: What are you left with when you open a form in Nintex Form designer and clear all of its contents?
Answer: A grid.
As Figure 2 shows, the canvas for all Nintex Form layouts is a grid - small rows and columns of cells used to aid in the layout and placement of objects on a form.
Figure 2: A Nintex form cleared of all its objects is a grid.
The Horizontal Grid
As Figure 3 shows, horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. Horizontal layouts are best for forms that will be used on desktops, where there is lots of horizontal space.
Figure 3: Horizontal form layout
In Nintex Form Designer (see Figure 4), you will notice that the default Desktop, Tablet, and iPad layouts are all horizontal, as those devices all have more horizontal space to work with.
Figure 4: Nintex Form with Horizontal Layout
The Vertical Grid
The form controls in this layout are stacked with left-aligned labels on the top. (See Figure 5)
Figure 5: Vertical form layout.
As Figure 6 shows, the vertical form layout is best for mobile devices where there is more vertical space to work with. Nintex Forms Designer applies a vertical layout as the default for the Smart Phone and Nintex Mobile Phone layouts.
Figure 6: Default layout for mobile phones
Logical Sequencing of Fields
So far, all examples of the continuity principle have been based on physical attributes – an arrow or finger pointing at another object, a grid of labels and fields arranged in a certain way. However, continuity in good form design can come from the logical grouping of fields who share related content. For example, when collecting geographic information, not only should the fields be placed on close proximity to each other, they should also be organized by order of scope – from largest to smallest.
Figure 7: Sequencing of fields based on logical continuity
As Figure 7 above shows, Country is the broadest category and is displayed first. A country is made up of multiple states or provinces – placed next on the form. A state or province is made up of multiple cities, which in-turn can have multiple postal codes.
The principle of Continuity states once the eye begins to follow something, it will continue traveling in that direction until it encounters another object. Continuity in good form design can come from both the physical and logical layout of the fields. The physical placement of labels, fields, and buttons in a grid can help users quickly and easily navigate the form. While the logical placement of fields together can help reduce confusion.
Below are links to the other posts in this series.
I just discovered that renaming a repeating section on a form is not something that you should do if you already have items submitted into a list. Below is what the repeating section looked like originally.
And this is what was displayed after I changed the name of the repeating section and re-published.
The fix is to change the repeating section back to its original name. After doing that, the contents displayed correctly once again. So, if you (or someone else on your team) renames a repeating section, please be sure to capture its original name before you publish the change.
This is the third post in my series about the Gestalt Principles as relates to form design. In this post I talk about the Gestalt Principle of Similarity. Of all the Gestalt principles, the principle of similarity is probably the easiest to understand. It states that elements within an assortment of objects are perceptually grouped together if they are similar to each other. To put it in simpler terms, things that are similar are perceived to be more related than those that are dissimilar.
I am an identical twin, so I completely understand this principle as I have been living it all my life. The most memorable question ever asked of my brother and me was “Are you all twins or brothers?” Our answer was always “Yes.”
As Figure 1 shows, similarity can occur in the form of size, color, shape, shading or other qualities.
Figure 1:The Similarity Variances of Share, Size, and Color Source: Interactive Design Foundation
Let’s take a look at the star diagram that we used to help describe proximity. Is there anything that immediately captures your attention?
What do you notice first - rows, columns, the two blue stars, or the 14 gray stars?
Figure 2: Similarity of color helps the user focus on a specific area.
A few areas on forms where the similarity principle comes into play are, but not limited to, labels, buttons, and fields.
As Figure 3 demonstrates, all field labels should maintain similar formatting throughout the form. You don’t want to have some labels that are left aligned, some right, aligned, and some center aligned. Pick and alignment and stick with it. Similarity can also be achieved by using generally accepted design elements in your form design. For example, the red asterisk (*) is commonly used to identify a required field. Don’t be creative and use another character or color to identify required fields – it just does not work. Note: Nintex Forms is programmed to automatically place the * in the label when a field in the SharePoint list is marked as required.
Figure 3: Similarity of label alignment and of special markings.
All buttons should be of similar appearance. What about the placement of the Save and Cancel buttons? Should the order be SAVE CANCEL or CANCEL SAVE? What do you think? Which do you prefer?
Figure 4: Order of Save and Cancel buttons
The correct answer is that there is no correct answer. Read the following quote from the Nielson Norman Group.
“In cases like this, it often doesn't matter what you do. Either choice has good arguments in its favor, and no choice is likely to cause usability catastrophes. It might save some users 0.1 seconds if you pick the "right" choice for certain circumstances, but it's simply not worth it to conduct sufficiently elaborate research to find out what that choice is.”
A particular element can be emphasized when it's dissimilar, breaking the pattern of similarity. This effect is called an anomaly. Highlighting a selected field is an example of an anomaly. In Figure 5 below, the form fields have been modified to highlight when selected. The dissimilar field is the active field.
Figure 5: Breaking the pattern of similarity to emphasize an element.
So that’s it for the principle of similarity. For further reading on this topic I suggest the following article:
This is the second post in my series about the Gestalt Principles as relates to form design. The introductory post can be found here. In this post I talk about the Gestalt Principle of Proximity. Proximity is all about whitespace - the area of blank canvas between objects. To me, whitespace is one of the most important elements of good form design, as the good use of whitespace makes a form look clean and easy to use.
Principle of Proximity
The principle of Proximity states that when an individual perceives an assortment of objects they perceive objects that are close to each other as forming a group. In Figure 1 below, the stars on the left are grouped closer together horizontally, so we tend to first see them grouped as rows. While the stars on the right are closer together vertically, so we tend to first see them as grouped in columns.
Figure 1: Proximity: Items that are close together appear to be grouped.
The principle of Proximity relates to forms in many ways from placing related fields close to each other or away from other content to aligning a label with its field.
In Figure 2 below, you can see two groups of fields. The first group captures information about the user, the second group captures the user’s feelings towards a certain topic. The proximity of the fields to each other shows relation. Those that are close to each other are related and those that are away from each other are not related.
Figure 2: The three text fields appear to form a separate group from the option button group.
In the next set of images, you see several different alignment layouts between the labels and their related fields. In Figure 3, the labels are left aligned. Notice the amount of white space between the label and the field. Some users might not associate the label with its control. In Figures 4 and 5, the labels are right aligned and top aligned. As you can see, the labels are close to the fields and more likely to be perceived as being related. In Figure 5, the labels could be placed even closer to their fields to make it even clearer that they are related. And finally, in Figure 6, the label is included in the field itself, providing little question as to what content goes in the field.
Figure 3: Left aligned labels. Could appear to the user as being unrelated to the text fields to the right.
Figure 4: Right aligned labels. Are closer to the text fields and visually appear to be related.
Figure 5: Top aligned labels are closer to the text fields and appear to be related.
Figure 6: Labels in the text field provide no question as to what information belongs there.
So that’s it for the principle of Proximity. I hope you found this article helpful. Feel free to reach out to me with comments or suggestions on how I can improve this series. I am relatively new to blogging, so I am open to helpful suggestions.
But, what good is a How-To document without some details on Why you would want to use the Twitter Action? So, here are two quick thoughts..
Your company sets up a central location to control all outgoing tweets from the corporate twitter account. Set up a simple workflow on a custom Corporate Tweet list list that runs every time an item is added to the list.
You company sets up a workflow to automatically post to their Wordpress blog (Using the Wordpress action!) To complete the posting process, they want to Tweet out that a new blog post was uploaded, but only after waiting for a certien period of time to make sure that everything with the blog is in order first.
I really like the Twitter action and hope that you will get value from using it as well.
I have been creating form and workflow solutions since 2010. And, for a period between 2011 and 2012, that all I did for a small non-profit company. Today, I often cringe when I have to go back and look at the design layouts of my earliest forms. They were functional, but not very pretty. Fortunately, my sense of design has evolved over the years. Experience has taught me what works and what does not work, what looks good and what does not. Recently, I started studying user interface design as part of attempt to better understand the concept of user experience. During my readings I came across a book that described the Gestalt Design Principles and how they related to user interface design. These “descriptive” principles validated many of the design principles that I was already doing. They also opened my eyes to other possibilities in form design.
In this series of blog posts, I will describe seven Gestalt design principles and show how they relate to form design. The final article will talk about combining the principles. I am hoping that this series will provide you with some insight into good form design or validate what you have already been doing.
What are the Gestalt Design Principles?
The following excerpt is from the book, Designing with the Mind in Mind, by Morgan Kaufmann Publishers 2010. It offers a brief history of the Gestalt Design Principles.
Early in the twentieth century, a group of German psychologists sought to explain how human visual perception works. The conducted experiments, observed, and recorded many visual phenomena. One of their basic findings is that human vision is holistic – that is our visual system automatically imposes structure on visual input and is wired to see whole shapes, figures, and objects rather than disconnected lines, edges, and areas. The German word for “shape” or “figure” is Gestalt, so these theories became known as the Gestalt theories of visual perception.
There are seven principles that apply to form design. They are proximity, similarity, continuity, closure, symmetry, figure/ground, and common fate. In upcoming articles, I will describe each of these principles and provide examples of how they relate to good form design.
It always pains me to see a company’s investment in software go to waste. I have seen some very expensive software just “sit of the shelf and collect dust” because staff are either unaware of its existence or have no idea what it does, or how it can be used. As a technical trainer, I have always made it one of my primary responsibilities to make sure that staff are aware of the tools that are available to them and also how the tools can be used to make their work lives better. This short article features some of the activities and attitudes that I have used in the past to help increase awareness and adoption of software at companies where I have worked.
I have found Lunch & Learns to be one of the most effective activities to introduce a large group of people to a new or unknown software product – especially when I was the one supplying the lunch. At a non-profit that I work for years ago, I was lucky enough to have a modest food budget that afforded me the ability to provide some very tasty (but inexpensive) lunches at my presentations. My sessions were always sold out. I believe it was the food that first attracted my audience, but it was the content that kept them coming back – at least that what I wanted to believe.
My “template” was the same every time – 1) to understand the software, 2) to understand the pain points of my audience, and 3) to offer example solutions. I rarely ever demonstrated the “how to” aspects of the software, unless it was to show “how easy” it was to use compared to a current product. More often I chose to focus on the “why to” aspects of software, answering the question “What can this software do for me?”
I also made it my business to understand the business of my co-workers. I would often scan the signup list and gather intelligence about my audience – what were their job responsibilities, what tools did they use, how did they work, and who did they work with? Empowered with that knowledge, I was able to craft relevant and timely examples in my presentations that would “speak directly” to my audience. After the lunch & learn ended, I would often have conversations like “I am dealing with that exact issue right now and that software seems like it will really help me. Can we meet later to talk about it?”
Using this template, I successfully introduced the concepts of automating processes with forms and workflows, creating stunning presentations using Prezi instead of PowerPoint, using OneNote for team collaboration, and much more. My efforts were positively recognized by IT leadership and always appreciated by my well informed – and well fed audience.
This is the second video that I produced to help me progress in my Nintex Forms for O365 learning journey. This video covers how to add a form to a list and provides an overview of the basic product functionality, navigation, and user interface. Hope you find it useful. Enjoy!
Hi all. I am very new user to Nintex Forms and Workflows for O365. As part of my learning process I like to create videos of topics as I learn them. It helps me to master content, one small chunk at a time. I would like to share my videos with the Nintex Community. This first video is a foundation setting video on Nintex forms for O365. It is designed for users with little to no experience working with forms. It presents the terms and concepts that will be used in later videos. Let me know if there are topics you would like to see presented. Enjoy!