Tuesday, June 19, 2018

Survey Form Challenge Walkthrough

RESET

Preface

First of all, FCC is great, thanks for such a great community, contributors, and people help people to code.

For great people are about starting or just finished the FCC Survey Form Challenge, I would like to share my thoughts and idea about one great form you would start coding and bring it to real world.

As I reviewed some random Survey Form works by people submitted them on FCC forum, I found some common issues belong to most of them, so I decided to start posting this article and point them out here.

NOTE: Please have your own design(colour scheme, icons, font, ...) This document talks about issues which would break your layout. Thanks.

Table Of Content

Common Mistakes

Most common issues are about mobile layout. Almost most of the works are great on desktop view, but it's broken in mobile. Please check following items are about all common mistakes breaks a page layout in mobile.

Absolute Units

Using CSS absolute units like pixel for controlling the elements advance(width and height) would break your layout.

Issue

When specifying an absolute size for an element, it tells the browser always set the specified size to the element, the issue comes when there is not enough space, then scroll happens!

Example(bad approach): width/height control with absolute units
<input type="text" style="width:255px"/>
Code snippet : input tag with constant absolute with
NOTE: using size attribute of input applies semi-absolute width over input and may break your layout too, like following
Example(bad approach): width/height control with size attribute
<input type="text" size="31"/>
Code snippet : input tag with size attribute specified

Solution

Not only one fix, let check some of them.

Fix 0: Using relative units

Using relative over absolute units could ensure you you will take sizes/values (relatively)based on device screen size. For the input one good replacement for the pixel could be percent.

<form>
<!--will never overflow of its parent(form) bound-->
<input style="width:80%" type="text"/>
</form>
Code snippet : using relative units like percent(%) for setting element advances

Beside percent % unit, you may use another relative units like view width vw too, but remember they are not the same, check following note.

NOTE: This is recommended you use percent(%) for non-container elements/section over vw(view width).
Container element example: 
<!--top/root layer container-->
<body>

<!--container element, vw works here-->
<form style="width:80vw">

<!--child(non-container) element, vw doesn't works here-->
<!--80% of parent width, not screen-->
<input style="width:80%"/>

</form>
</body>
Code snippet : using percent(%) for non-container, and view width(vw) for top-level container elements

Fix 1: Using relative units for default size, and absolute unit for max-size

width:90% might work very good and as expected in mobile, because in mobile we try to utilize all screen area.

For serving one css rule for one element (no @media queries), you may set the default size using a relative unit, and control the maximum size(probably for desktop view) with a absolute unit. Considering following example

.myform{
width:90vw;/*by default goes for 90% of screen width*/
max-width:10in;/*when screen is too wide, keep it 10in as max*/
}
Code snippet : using relative and absolute units to set default and max with for a css class.

Mixed padding and margin

One mistake beginners would take is about mixing up(mess!) padding and margin attributes for elements, especially containers.

FACT: padding of parent element, works like margin for children elements have edge-edge relation.

NOTE: browsers apply small about of margin to body tag by default, if you add a div with width:100% this might causes scroll at any screen

<!--body has default margin of 8px-->
<body>
<!--the actual width is 100% + 8px +8px, so scroll-->
<div style="width:100%">
</div>
</body>
Code snippet : sample code to examine margin values are added to applied advance(width).

Issue

Using relative units for padding/margin, and using absolute units for with or vice versa could lead to horizontal scrolling, check following example

Example(bad approach): mixed relative/absolute units for padding/margin and width
<!--possible scroll when 50px+50px is more than 30% of the screen-->
<div style="padding:50px;width:70%">

</div>
Code snippet : sample code of absolute value for margin and relative value for(width).

Solution

This could be great to use relative units for specifying padding and margin attributes.

TIP: Use box-sizing:border-box to tell browser ignore padding and margin values for calculating element target advance.

Now check out what happens when you use box-sizing:border-box for snippet code 5. The child element will never causes scrolling

<!--body has default margin of 8px-->
<body>
<!--margin values won't be used for calculating the target advance now-->
<div style="width:100%; box-sizing:border-box">
</div>
</body>
Code snippet : using box-sizing:border-box tells browser ignore padding/margin for calculating target element advance.

Issue

Using negative padding or margin to relocating elements.

This is not recommended! please don't do this. Instead of applying negative value for padding or margin, reducing(override) the padding of parent child. Considering following bad practice for instance.

Example(bad approach): using negative padding/margin to apply less space from parent.

See the Pen Negative value for padding/margin (please don't) by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using negative value for padding sample(Codepen link)

Solution

Fix is easy, but remember if you code in proper way, you will never face with sucha situation to think about using negative padding or margin values.

For above bad example case(code snipped 8), as you see browser applies some padding(not really padding, but like padding, it's for sample) for ul tag by default. It's usually 40px. So you may simply overrides it with less value to fix the spacing issue like following.

See the Pen ZRywgo by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : reduce parent padding/margin instead of applying negative value for childs(Codepen link)

Element Spacing

In mobile, this is good practice to bring more space between elements(especially the input elements)

The reason is simple, pointing with finger is hard, but it's easy with mouse

Issue

Not enough spacing between elements, make it hard to select element in mobile, also make it harder to read and scan page content.

FACT: Default spacing setting by browsers are good enough for desktop and big screens, but for mobile this might be better to bring some more spacing.

Please considering following example comes with zero spacing between elements. This may not critical for desktop, but for mobile is kind of a little hard to tap on exact element.

Example(bad design): Not enough spacing between elements could make it hard to select them. Same make it hard to read page content.

See the Pen not enough spacing between input elements by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Sample layout with zero spacing between element

Solution

For mobile view, adding spacing between elements(especially input elements), a little more line-height, and some padding would make the page more readable, but more lengthy page.

NOTE: Small elements on either small or large screens are no recommended. Enlarging small elements, or providing easy access to them would help too much.

Considering following example which comes with a layout with good spacing between elements, and some padding for text fields and text areas.

See the Pen yEPvem by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Sample layout with good spacing between element(and some fancy css for text field and text area)

label For input Tags

Each input you add in your page, should have one associated label to it.

One good label does for you is it forwards any click/tap event to associated input. This is really useful especially for radio and checkbox buttons, as radio and checkbox elements are not so big by default, clicking to its label causes selecting the radio/checkbox.

In mobile view especially, as tapping on a small radio button could be a little hard, tapping on label to to select the radio/checkbox is much easier and good thing.

Issue

It's a common issue developers forget to associate a label to each input element(especially radio and checkboxes)

Considering following bad example, that radio and checkbox element comes without any associated label. user needs to click/tap on radio/checkbox circle/square element to select the element. The text next to radio doesn't forward tap/click event to radio/checkbox.

Example(bad approach): input radio and checkbox elements without any associated label

See the Pen KeXMoZ by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : sample input radio and checkbox element without any label tag associated.

Solution

So simple to associate a label input, yes really easy. You may do this in two ways.

Fix 0: host the input element within a label tag.

This is one very easy solution, simply put the input inside a label tag, and it's done.

Now considering following example. As inputs are hosted by labels, so clicking hosted content inside label could select the radio.

See the Pen ERwgaq by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using label by placing input tag as child.

TIP: You may not just put text inside a label tag. Any other objects could be hosted.

Considering following example, that clicking in any colour are causes the radio select becasue is part of the label tag.

See the Pen Lrzmgb by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using customized label by placing input tag as child.

PRO TIP: You would simply hide the radio button, and with some help of js(very easy), perform some kind of fancy radio button rendering.

Even you not clicking on radio button, and it's hidden, but you actually sent the event, and the related parameter is set, so it's completely html compatible.

I note I've never done this before, but it was full of fun, so easy! YES. Considering following example.

See the Pen Cool customized radio button by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using very cool customized label, input tag as child and hidden (using js/jquery).

Fix 1: linking label to input element using for="input_id" attribute

This way needs one more step over fix0 solution. And it's really easy, each input element should come with a unique id value(no matter what, but unique)

Now label points to related input using for attribute, where value is the id value of target input.

NOTE: You may not host the input inside the label tag if you refer it by id from label tag.

TIP: not only one label would point out to one input. You would have more than one labels which all point to one input(same id)

Considering following example

See the Pen oyGYod by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using label for input by referring to its id.

Not enough contrast between background and foreground colours

Issue

Not having enough contrast between foreground(fg) and background(bg) colours, make it hard to read content of page. Example using very light colours on white.

This is really easy to find out if your page is not very readable, and contains this issue. Simply try to read content(text, objects...) of your page, or even better ask a friend.

If it looks a little hard, or after a while of reading you have some pain on your eyez, so you've got some problems. Considering following example

Example(bad design): Usine not enough contrast or sync-ed values between fg and bg colours.

See the Pen Not sync-ed fg and bg background colour by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Code sample, not enough contrast between background and foreground colours

Solution

Since this is related to design, and out of standard sort of. So no one can tell what colour is good for bg, and what should be used for fg?

Again, just make sure your content of page are very clear for reading, at any part.

Personally I go for white for bg, black for fg, and two colours(usually lime, and cyan) for primary and secondary colours. Those primary and secondary colours are used for elements need dedicated attention, such as form submit buttons, or hyperlinks(anchors), etc... Considering following example

See the Pen Sample page 0 by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : simple page layout.

Placeholders for text fields and text areas

Placeholder is a default text is used/rendered about text fields, and text areas when they are empty.

Issue

Text fields and text areas come without any placeholder associated. Instead they have some default value or content(text area).

Considering following bad example uses wrong way bring placeholder like approach using default value.

Example(bad approach): Using default value(for input) or content(for )

See the Pen don't use default values as placeholders by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using default values as palceholders.

Solution

Both textarea and text field input have a property as placeholder. Considering following example.

See the Pen using palceholder for textfield and textarea by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using placeholders for textfield(input) and textarea.

NOTE: do not use placeholder for specifying a default value, instead set the value(for input) or tag data(textarea).

NOTE: Placing anything(including white space, new line, ... anything) between open and close textarea tag will be used and rendered in textarea. This causes browser render default value instead of placeholder you specified.

Suggestions

Now time for some suggestion. Please note these are not law of the work, but I think having them could make work better. You may simply ignore them all.

Mark(Split) Form's Sections Using Horizontal (hr tag)

Having horizontal line between sections of form make it more easier to read. user would find it easier if some some parts are belong to each other. In some cases this section splitter is kind of essential, but for survey form this could be there(better), or not.

For instance your very first section of form could be the text fields you take name, email and age of the user. After these elements, you may put a horizontal line.

Another example could be about group of checkbox buttons. As you asking some yes/no questions, these could be assume one section, so horizontal lines before and after checkbox buttons.

I also suggest you don't let the horizontal line reach any visible vertical(left and right)border too. It will makes your design a little weird! let it be 75% of width for example.

Don't Override Global font-size

Many users (including me), set desired font-size with their browser. I set 18px as default(someone set as 10px, and someone set as 32px). But when a page sets global font-size to 14px, it is me to zoom and just ignores applied size.

The bad part is you applied some layout based on font-size you set, so zooming would breaks page layout.

FACT: best global font-size is no any global font-size.

NOTE: Since now you don't know what is a default global font-size, so using pixel(or any absolute) unit to enlarge a section is not a good idea at all! Usr em instead. Example: font-size:2em means first inherits(get) default/current font-size, than double(2.0em) it up.

No any valid default option for combobox(select)

By default, the very first element of select(combobox) is selected by default if you don't set any selected element.

Solution 0(recommended): using a disabled option as default element.

For some situation, selecting a valid option as default works, but sometimes you need user attention to select the correct value. And the problem is when a valid value is selected, user may forget to select the correct value and submit the form.

For combobox, this is a good practice to have a disabled(non selectable) option with a informative label such as "--please select--" and mark it as default selected. And as it's disabled, user may not select it again.

Considering following example.

See the Pen Using a disabled option for select element as default value by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Using a disabled option as default selected element for select

Solution 1: Using a hidden option and mark it as selected or palce it at first

So easy, just considering exmaple.

See the Pen Using a hidden option to set nothing as default value for select by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Using a hidden option to set nothing as default selected element in select

Solution 2: Get some help of JS, to set nothing as selected index(element)

In js, you would access the select element and change the selected element by its index (e.g. index 0 means first element).

Setting the selected element(selectedIndex) to -1 causes current element set to nothing. Considering following example.

See the Pen Using js to set default(nothing) element for select by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : using js to set nothing for select

Design Suggestion

Beside suggestions for all about layouting, let's have some small suggestion about the design.

NOTE: You may ignore this section, since it reflects some personal(opinion-based) ideas about the designing. Thanks.

Sharp And Perfect-Size Form

Having a background colour for page(usually lighter colour of primary colour), and primary background colour(probably white) for form makes the design kind of nice.

border and box-shadow also work for desktop view.

Having a form which elements are all fit to screen width in desktop view looks not so logical, while it's better to make it fit for small devices and avoid having not necessary styling stuffs like too much padding, border, box shadows to utilize maximum space for mobile.

Hopefully this is really easy to control the maximum width form using max-width attribute with some good values, like max-width:7in.

But for mobile, as I stated, this may be good to use spaces for page content, and remove some styling needs space like border.

This is also so easy to get some help of media queries to hide/remove some styling and bring more space for content.

NOTE AGAIN: In mobile layouting, space is gold. A good layout utilise the maximum space of screen, while it provide good spacing between elements too.

Considering the primary background is lime, bg is white, fg is black, now putting all above stuffs together, considering following example.

See the Pen Sharp and perfect-size form by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Sharp and perfect-size form

A sharp and contrasted submit button is the best

This may be not so logical, but works indeed, to place the submit button center of form, make it sharp(bold 'n' big) and contrasted.

Just as I suggested about having a primary contrasted colour(usually not grayscale), using the primary colour as background color for submit button works very good.

For instance please refer to code snippet 18., or previous sample.

Same Advance For Comboboxes, Text Fields, And Text Areas

Your form may place text fields(comboboxes, and text areas) in same x position in your page, so as they starts from one position, they could be better to end with one position too.

This makes Your form look more pro I think, but again my opinion, you may reject.

Template Layout

Here I would share some very basic layout template you may use to bring your survey page based on them.

Sample Responsive Layout

Now we would have one, very simple layout without any media queries, working perfectly for any screen.

Feel free to use and give feedback to make it better, remember it is here becasue of simplicity, not expecting to bring some fancy stuffs like bootstrap, etc...

See the Pen Sample Responsive Layout by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Very simple responsive layout with CSS and HTML

Responsive Grid(2 col) Layout Template

Before we talk about two column table like grid layout, I think one column layout(or flow layout) works well for almost every page for all devices.

NOTE: since we are talking about survey form, for desktop and wide enough screens(probably tablets too) we would go for a two-column layout too.

But it doesn't matter if I like or not, let's have a responsive two column grid template layout which turns into one column

Fix 0: using repeat as grid template column

This approach is my favorite, it's simple, and easy.

Using grid and repeat mode for grid-template-columns.

IMPORTANT NOTE: Using repeat mode tells the browser to place(repeat) another column when there is enough space. So make sure you set values for advances(especially width) to not allow 3rd column and beyond.

Again, remember to set correct values for grid container width size, same the columns width to let it be 1 column(when screen is small) or 2 when screen is wide enough.

Please considering following example. Try to open the codepen link and resize the preview/result pane to see how does grid response to different sizes. Also check and see how grid container width is sync with column template repeat value to avoid 3rd and next columns.

See the Pen Sample grid 2-col responsive layout by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Grid 2-col responsive simple layout

Simple you could host labels or titles with elements at left(evens, if you count from 0) and inputs for columns at right(odds).

NOTE: please note you still need some hand of media queries to center text when design is in 1 column form(mobile) or at left when desktop.

Fix 1: using some help of media queries to bring great layout for different screen sizes

This approach is one very common way to get some hand of media queries controlling layout for different screen sizes.

It gives more control over fix 0 solution, as you could override almost everything.

Considering following example is kind of same as above, but using media queries and more better styling

See the Pen WyXWdM by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Better Grid 2-col responsive simple layout using media query

Sampel Survey Form

Now let's have all of the stuff we talked about, and have a simple(yes simple. because simple works all the time, but to be honest I'm not very good at designing :D) survey page. YES.

NOTE: I'm not a UI/UX expert, but I always try my best about it. The design may not look okay. I just focused on layout to bring it functional and right. Thanks.

NOTE: This sample survey form does not follow FCC rules and would be failed by FCC tests. This is just for sampling, not a FCC survey form template. Thanks.

See the Pen sample survey form by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Very basic survey form sample layout design

META

Dear great friend, thanks for reading. If you think some part of the article needs editing, or any missed subject could be there, feel free to comment and share your thoughts. Thanks.

HAPPY PROGRAMMING!

Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)