Hi Community,
Wanted to start a post where Limesurvey’s (3.x) awesome flexibility is used to demonstrate visually clean and stunning template question designs (with full code/ config.) for everyone to benefit.

Attached is my view of a nice Welcome Page to a survey. Key points:
• Transparent background image = more engaging (Extend the bootstrap “Black Pearl” theme and insert a background image and logo in the simple options)
• Introduction page: (Goto survey settings “Presentation” and turn on “Show welcome screen”. Turn off the “Progress bar” as it’s untidy.)
• Remove the excessive gap between the navbar-header and question container by adding the following to custom.css (.space-col { margin-top: -3em; margin-bottom: 0em;})
• One page per question, so a user never has to align the question or answer on the page (Goto survey “general settings” select “question by question”)
• Central justified and use less than 50% Width of the screen (for a desktop). In custom.css enter the following:
/* controls the width of the question container */
@media (min-width: 992px) {#outerframeContainer { width: 50%;}}
• Replaced “Next” and “Previous” with “<” and “>” as icons are always better than words. (Find and replace in navigator.twig)

If I was technically able, I’d change the colour of the “>” so it turns dark on hover and then flashes when selected (feel free to update code if you know how) prior to moving onto next page.

am particularly interested if persons have been able to build quality question types (or alternatives) such as mocked up examples in the attach ment.

Tpartner has released question themes. Perhaps a bit more focused on technical aspects.
github.com/tpartner?tab=repositories
We see still need for improvement in the theme system (e.g. offering more access to variables).

I sometimes wonder, why certain defaults in LS (e.g excessive gap) are not changing.
My impression is that the excessive gap is not very popular

thank you for sharing !

workloopteam wrote: One page per question, so a user never has to align the question or answer on the page (Goto survey “general settings” select “question by question”)

I still recommend to use Group mode. You will often only add one question, but you sometimes have workarounds with hidden questions. So Group mode should be preferred.

Can you provide a negative example when it comes to need for alignment?

jelo wrote: I still recommend to use Group mode.

Same, always group mode !

Even if there are only one question by group. If you just need to add a «please explain» short text : best in same page.

icons are always better than words

This is also not true. At least if you insist on the "always". User testing shows that icons can be far worse than words. Because icons are not always clear. In this case here I think it is quite straight forward and makes total sense to use icons, but I am not convinced by "always icons".

holch wrote:

icons are always better than words

This is also not true. At least if you insist on the "always". User testing shows that icons can be far worse than words. Because icons are not always clear. In this case here I think it is quite straight forward and makes total sense to use icons, but I am not convinced by "always icons".

One of the bad behaviour of previous limesurvey admin is : icon only, then hard to know what each button do

Exactly. Some icons are very clear and hard to confuse. Like the back and forth arrows. But if you try to force icons for everything, things get often messy, because sometimes there are no clear symbols for specific things. And people don't get what an icon means. Anyway, I think workloopteam actually didn't mean it exactly as he/she said. So let's not continue hacking on that single "allways" in the sentence. In the case he/she mentions I agree, the arrows are probably very easy to understand and quicker for the brain to process than the buttons with text.

holch wrote: … the arrows are probably very easy to understand and quicker for the brain to process than the buttons with text.

Still need a string for accessibility , and remind to inverse arrow for rtl template too …

Still need a string for accessibility ,

Agreed.

and remind to inverse arrow for rtl template too …

Good one. But I guess for many people here it is irrelevant. Me for example. I have never run a survey with rtl languages.

Hi Team.

Just signed up to three of the largest online sites (Valued Opinions, Toluna and IPSOS) where completion rates materially affect $$$.... and can confirm that two of the three continue to use a page by page view - They were also extremely visual and image based in collecting information. The third site wasn't working.

Either way, this is less interesting that seeing examples of cutting edge LS design/ UX led question types i.e. strong use of images, .js interaction and minimal scrolling/ button clicks by users.

"Beautiful" surveys focused on human centred design have been on the rise for many years. I doubt I'm the only person interested in seeing a much larger gallery of LS examples?