Making PW more userfriendly

[Martijn Geerts]

Thanks OrganizedFellow,

Learning new things is core to human nature. When you stop learning, you'll become depressive.

ps, That OrganizedFellow is really organised. (I saw his bookmarks:-)) We know he invested in learning, he succeeded. It's a pleasure to have him here.

Edited September 14, 2014 by Martijn Geerts

[OrganizedFellow]

ps, That OrganizedFellow is really organised. (I saw his bookmarks:-)) We know he invested in learning, he succeeded. It's a pleasure to have him here.

bwhahaha. thanks man!

[woop]

Interesting discussion! I definitely think Processwire could improve its usability but I don't think plugins is the way to do it.

I just did a clean install of PW 2.5 and documented each step in the process. Here's a .pdf with 44 slides that covers the scenario of a new user's first contact with PW: http://cl.ly/0e3V2M3w1z1B

​comments appreciated

[Nico Knoll]

@woop: Thanks for taking the time to do this - it's amazing and I think you're right in each of your points!!

[horst]

Hey @woop, many thanks for your processwire_onboarding.pdf 

I'm currently on page 8 of 44 and already have great pleasure. (Default is not at the top because the list is sorted alphabetically, but: I get what you want say!)

This is of great usage helping us to change the perspective that way!

If I could I would double-like your post.

[Philipp]

woop, you hide the best part on the last slide. To quote his PDF:

Modules and themes doesn’t help the user understand the system. It just tries to hide the complexity by adding more complexity. 

I like ProcessWire the way it is. Clean and minimal. Please, don't tell me how to do things. Instead focus on tutorials, guidelines and articles that explain how to use the tool ProcessWire to build great sites.

My first site with ProcessWire was quite easy and not a complex monster. I learned how to use different field types and how to structure content with each project and I'm still impressed, when I find a new way to solve a problem with ProcessWire. That wouldn't be possible, if I had everything finished. Then I would say "Oh thats great but not exactly what I needed". 

ProcessWire as a clean and minimal CMS/CMF to build a website is great. Ryan should try to improve the system itself and keep bloat away. (In my opinion, the new 2.5 with all it's profiles is even too much to start). There are other areas to improve, beside the system and most of them were mentioned before in this thread:

• Better onboarding process that guides the users
• A single place for all the little code snippets and fragments.
• Tutorials for beginners and experts. Maybe have a look the new Kirby docs
• More site profiles to start with, but not bundled by default (Download during the installation?)

[pwired]

Philipp, imho you nailed it.

[hdesigns]

woop, your pdf is great. It reflects the first thoughts a webmaster could have when he/she gets his/her hands dirty at pw for the first time!
imho the critics at the installation part where a bit too much (I found the installation process pretty easy when I saw pw for the first time).

What now would be great is if there was a second part of your document where you (or someone else) enlightens the reader how to take the next step (or at least where exactly to find the answers to your questions at the end of the first part).

I know it was not your intention to take newbies by their hands with your doc. But when I read the pdf I can think of a lot of beginners who feel exactly the same way as you did. So they could indentify themselfs with you and (maybe) would follow the next steps in the second part.

[SteveB]

Maybe I'm overreacting but a few of Woop's comments seem to value seductive sales/outreach style of presentation over efficient transfer of information. We need both but they are not interchangeable.

readme.md - "Not a very welcoming start" 

I don't see it that way at all. When I see a readme file that traces back to a version control repository I feel pretty confident that I'm looking at up to date info that's actively maintained, probably by someone with first hand knowledge of the content.

Also, one page of clearly organized text is so much more accessible and easy to grasp than having to slog through whitespace, logos and blather like "we create something beautiful together" to find kernals of truth for my project notes.

The thing about all of this documentation and user interface stuff is that it's a huge amount of work to communicate effectively to different audiences and keep it up to date and error free. I hope we can create an environment where glimpses of underlying complexity or unfamiliar terms is not off putting to new or not very technical users and they have the tools to find out what they don't already know.

Reference and how-to information about Processwire exists but the fact that it's scattered in different places (including this forum) makes finding it a little tricky. Wouldn't it be great to have a Processwire powered knowledge base kind of thing that we could throw all that into? We already have the API cheatsheet. That kind of drill down treatment could be applied to tutorials and snippets too. Maybe we could work out a clever bot to mine the forum posts and link some of that content in as well. Hard to know where to begin (or end) with that kind of thing.

[Nico Knoll]

Gonna mention it again: We're working on snippets.pw

[woop]

Thanks for the feedback, everyone! I'm glad you like it. 

@Philipp thanks. Great summary. I very much agree with you in everything you said. Site profiles can be good, but we have to know where to draw the line. It's harder to keep everything consistent and maintainable when the user's installations can differ so much.

@hdesigns Yes, it's a bit harsh. I'm sure the majority will have absolutely no problem getting through the installation. I'm just trying to identify the potential problems one might run into. Every problem, even the small ones, will add up and affect the overall experience and willingness in learning a completely new system.

I don't think we need a .pdf that explains how to deal with the questions I bring up. These should be answered directly in the admin ui, the theme's structure, the preloaded content and the comments in the .php files. I rather help designing/writing these views than adding yet another source of documentation, to be honest.

@steveB you are absolutely right regarding the seductive sale style. I'm an interaction designer for commercial products in my day to day job, which of course influences my analysis here. However, the "seductive" style is applied to keep people's interest through the boring parts of the process. It's about finding the lows and compensating by giving something back or reminding the user why they're here in the first place. It's generally very effective and often good for both parts (unless we stop being informative, as you pointed out).

You're also right about the version control aspect of the read me file. Very good point, which of course applies to the more advanced users. I tried to write my .pdf through the perspective of a novice user. One that knows a bit of html/css/js and maybe have some experience with other cms's. Git and version control usually comes later.

Again, I think Philipp's post is a very good summary of how to move forward addressing these issues.

[NorbertH]

@woop

How about helping Ryan with rewriting the templates content?

[Nico Knoll]

Inspired by the pdf I made a little proof of concept welcome page + guide through how to create a field, template and page. Check it out: GetStarted.zip

Edit: Updated it.

[Philipp]

Cool! Installed it on a test site. I like the basic idea but think there is still some work to do on the execution.

 

Demo:

http://terbium-znu.lightningpw.com/processwire/page/

User: demo

Password: demo123 

(Hint: Yes, that is a shameless self-ad for lightning.pw. Hope that's ok)

 

But most of the points adressed in the onboarding PDF could be fixed with little changes to the default text and for example providing a preview of the admin URL instead of only the name.

[OrganizedFellow]

Lots of great ideas in this thread.

Heck mannn, lotsss of grrreat ideasss everywhere!

[mr-fan]

there are a bunch of new tutorials on the way and my special part is this point on chapter 1

Below is the basic content of a ProcessWire template file:

As you can see it is rather minimal. In fact completely blank.

So have a great reading - for all non coders - really great - usually you didn't get such good docs on other CMS/CMF anyway!!

https://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/

https://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/part-1-pages-templates-fields-files/

https://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/chapter-2-easy-images/

https://processwire.com/docs/tutorials/hello-worlds/

thanks to joss and ryan

i hate it to be not that good in english - so writing tutorials is limited for me.....did several in german for former systems.

[marcus]

Inspired by the pdf I made a little proof of concept welcome page + guide through how to create a field, template and page. Check it out: GetStarted.zip

I think this is an ingenious idea and the perfect amount of onboarding / starter assistance! Nothing less, but also nothing more. And that Philipp's/conclurer's service just launched and this way is able to quickly showcase Nico's module gives me a hell of a good feeling regarding PWs future. And all the features of 2.5 of course!

[Nico Knoll]

Thanks Only have to hide the tooltips again afterwards and do some more fine-tuning

[woop]

Cool! I rewrote the default theme to use the old theme structure with head and foot includes instead of inits and main. I think this makes the setup more transparent and easier to follow for new users. I also added a lot more comments to explain what is going on. Here's an example from the sitemap.php file.

Before:

<?php 

// sitemap.php template file
// Generate navigation that descends up to 4 levels into the tree.
// See the _func.php for the renderNav() function definition. 

$content = renderNav($homepage, 4); 

 

After:

<?php
/*
This is a template file. Pages based on the sitemap template will render using the code below.
ProcessWire provides variables to every template. The variables makes it easy to find content, 
submit data and more. The most frequently used variables are $page and $pages. $page holds info 
about the current page and $pages is where you'll find all the other pages in your site.
You can read more about ProcessWire's variables here: https://processwire.com/api/variables/
*/

include_once("includes/head.php"); // Import the global html header
include_once("includes/functions.php"); // Import custom functions from another document

$homepage = $pages->get("/"); // Use the $pages variable to fetch the homepage
echo $page->summary; // Echo the current page's summary field
echo renderNav($homepage, 4); // Call our function from functions.php to render a sitemap

include_once("includes/foot.php"); // Import the global html footer

What do you think? Too much? 

[Nico Knoll]

I think you don't have to comment each line. Just group them up and put the comment above the group. Only if it is something special you should an additional comment next to the line. Anyway nice work!

[apeisa]

Nico, that's a super cool module! As a final step I suggest telling where to create the sometemplate.php and how to output the sometext field.

[Nico Knoll]

Working on it

[renobird]

Nico,

What a great idea! How do you see it working long term? It would be a little weird to leave there for more experienced users, but great to have readily available whenever needed.

When you close it, does it disappear for good, or just collapse into a "getting started" header that you can click to reopen?

[renobird]

Doh! Nevermind. I missed the uninstall this module. On mobile.

[woop]

The walkthrough module is great. We just have to make sure we also answer the basic questions like "What is a field", "What is a template" and "What is a page". Creating a field is already very easy to do (it's just a basic form). The question is, why do you do it and how does it relate to a template and its pages? We've already covered this thousands of times in tutorials, video walkthroughs, faqs and forum posts – but we don't explain it in the actual user interface.

couldn't get the module to work 100%, but I imagine the guided tour to be something like this

Create new text field -> Create new template -> Add the same field you created in the first step, to your new template -> Create a page based on this template -> Point the user to the template file and describe how to add the field to the output of that template -> Visit the final page -> Recap all the steps in text and point to relevant documentation for further reading.