Jump to content

Making PW more userfriendly


NorbertH

Recommended Posts

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 by Martijn Geerts
  • Like 3
Link to comment
Share on other sites

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 :)

  • Like 21
Link to comment
Share on other sites

Hey @woop, many thanks for your processwire_onboarding.pdf  :lol::grin:

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.

  • Like 1
Link to comment
Share on other sites

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?)
  • Like 15
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 6
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

post-752-0-03796300-1410735502_thumb.jpg

  • Like 8
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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: attachicon.gifGetStarted.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! :)

  • Like 1
Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By spercy16
      I was previously using individual fields to capture and output multiple cards onto my web page but after recently learning about repeaters would prefer to use this field type, as it will be a lot more user friendly for end users to create new cards. I tried to modify my code to grab the fields from the new Repeater field(s) but am getting this error message on the page:
      Here is the code I'm currently trying to use for the cards:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items foreach($page->tall_card as $card) { $count = 0; $count++; $options = array( 'quality' => 70 ); $image = $card->image; $img = $card->image->size(550, 400, $options); $cardHeading = $card->title; $cardBody = $card->plain_paragraph; $raised = $card->raised_amount; $goal = $card->goal_amount; $link = $card->link; if ($raised == 0 ) : $percent = 0; else: $percent = $raised_amount / $goal_amount * 100; endif; if ($percent <= 5) : $percent = 0; endif; ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $cardHeading; ?></h2> <?php echo $cardBody; ?> </div> <div class="progressBarSection"> <progress class="progressBar" id="progressbar<?php echo $count; ?>" value="<?php echo $percent; ?>" max="100"></progress> <span class="raisedAmount"> $<?php echo $raised; ?> usd </span> <span class="goalAmount"> $<?php echo $goal; ?> usd </span> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $link; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php } ?> Thanks in advance for any help!
    • By CachePuzzles
      Hi there,
      I'm probably missing something simple, but I'm just setting up my first site so I guess that's bound to happen.
      I've installed the LoginRegistration module and at first I was thinking that the confirmation emails weren't being sent. However I now see that new user confirmation emails are taking 20+ minutes to arrive. Is there a way to speed this up?
      Also the email is coming from processwire@mydomain - I couldn't found a place to change this.
      Any advice or help would be great!
      Brian
    • By humanafterall
      Hi,
      I would like to set an admin template to 'https only' as recommended in the Processwire security docs.
      However if I do this it forces this setting locally too, resulting in https://localhost requests which result in an error page.
      Is there a simple way round this? Setting https for templates in the config?
      Thanks!
    • By fruid
      Hi friends,
      just 7 months ago, I was "just" a designer and a rather semi-developer, still struggling with WordPress sites and more often than not delegating that work to pros. ProcessWire really helped me realising that it's not that hard after all (well it's still hard but it's doable) and you learn a lot just by doing it which has to be true for all developers anyway. So I started coding myself, I might also have to thank the 2020 pandemic to help me focus a bit more than usual, I created a bunch of websites using PW already – one of which I can't wait to put on showcases but it's still not live yet. That is one big personal milestone for me. The next milestone would be to give something back, and so I'd like to take on contributing some code I wrote, namely a event calendar for anyone to use. It's my first attempt doing this so please don't eat me alive. It's not a PW module yet (that's the plan however) just a git but I'm positive it will be useful once it works – well it works but it still needs more work – because if I had found a module that came close I wouldn't have started coding it myself :D
      With that, I will appreciate all input, be it how to improve the .js (probably especially), or the templates, or guidance how to proceed turning this into a PW-module, and of course, in that last process, no pun intended, suggestions to make it more versatile for different needs.
      git: github.com/bbblgmsp/ProcessEventCalendar
      demo: http://foobar.roofaccess.org/events/
      Thank you!
    • By Chris Bennett
      Hi all, I am going round and round in circles and would greatly appreciate if anyone can point me in the right direction.
      I am sure I am doing something dumb, or missing something I should know, but don't. Story of my life 😉

      Playing round with a module and my basic problem is I want to upload an image and also use InputfieldMarkup and other Inputfields.
      Going back and forth between trying an api generated page defining Fieldgroup, Template, Fields, Page and the InputfieldWrapper method.

      InputfieldWrapper method works great for all the markup stuff, but I just can't wrap my head around what I need to do to save the image to the database.
      Can generate a Field for it (thanks to the api investigations) but not sure what I need to do to link the Inputfield to that. Tried a lot of stuff from various threads, of varying dates without luck.
      Undoubtedly not helped by me not knowing enough.

      Defining Fieldgroup etc through the api seems nice and clean and works great for the images but I can't wrap my head around how/if I can add/append/hook the InputfieldWrapper/InputfieldMarkup stuff I'd like to include on that template as well. Not even sure if it should be where it is on ___install with the Fieldtype stuff or later on . Not getting Tracy errors, just nothing seems to happen.
      If anyone has any ideas or can point me in the right direction, that would be great because at the moment I am stumbling round in the dark.
       
      public function ___install() { parent::___install(); $page = $this->pages->get('name='.self::PAGE_NAME); if (!$page->id) { // Create fieldgroup, template, fields and page // Create new fieldgroup $fmFieldgroup = new Fieldgroup(); $fmFieldgroup->name = MODULE_NAME.'-fieldgroup'; $fmFieldgroup->add($this->fields->get('title')); // needed title field $fmFieldgroup->save(); // Create new template using the fieldgroup $fmTemplate = new Template(); $fmTemplate->name = MODULE_NAME; $fmTemplate->fieldgroup = $fmFieldgroup; $fmTemplate->noSettings = 1; $fmTemplate->noChildren = 1; $fmTemplate->allowNewPages = 0; $fmTemplate->tabContent = MODULE_NAME; $fmTemplate->noChangeTemplate = 1; $fmTemplate->setIcon(ICON); $fmTemplate->save(); // Favicon source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFavicon'; $fmField->label = 'Favicon'; $fmField->focusMode = 'off'; $fmField->gridMode = 'grid'; $fmField->extensions = 'svg png'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Favicon Silhouette source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFaviconSilhouette'; $fmField->label = 'SVG Silhouette'; $fmField->notes = 'When creating a silhouette/mask svg version for Safari Pinned Tabs and Windows Tiles, we recommend setting your viewbox for 0 0 16 16, as this is what Apple requires. In many cases, the easiest way to do this in something like illustrator is a sacrificial rectangle with no fill, and no stroke at 16 x 16. This forces the desired viewbox and can then be discarded easily using something as simple as notepad. Easy is good, especially when you get the result you want without a lot of hassle.'; $fmField->focusMode = 'off'; $fmField->extensions = 'svg'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Create: Open Settings Tab $tabOpener = new Field(); $tabOpener->type = new FieldtypeFieldsetTabOpen(); $tabOpener->name = 'fmTab1'; $tabOpener->label = "Favicon Settings"; $tabOpener->collapsed = Inputfield::collapsedNever; $tabOpener->addTag(MODULE_NAME); $tabOpener->save(); // Create: Close Settings Tab $tabCloser = new Field(); $tabCloser->type = new FieldtypeFieldsetClose; $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier; $tabCloser->label = "Close open tab"; $tabCloser->addTag(MODULE_NAME); $tabCloser->save(); // Create: Opens wrapper for Favicon Folder Name $filesOpener = new Field(); $filesOpener->type = new FieldtypeFieldsetOpen(); $filesOpener->name = 'fmOpenFolderName'; $filesOpener->label = 'Wrap Folder Name'; $filesOpener->class = 'inline'; $filesOpener->collapsed = Inputfield::collapsedNever; $filesOpener->addTag(MODULE_NAME); $filesOpener->save(); // Create: Close wrapper for Favicon Folder Name $filesCloser = new Field(); $filesCloser->type = new FieldtypeFieldsetClose(); $filesCloser->name = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier; $filesCloser->label = "Close open fieldset"; $filesCloser->addTag(MODULE_NAME); $filesCloser->save(); // Create Favicon Folder Name $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeText"); $fmField->name = 'folderName'; $fmField->label = 'Favicon Folder:'; $fmField->description = $this->config->urls->files; $fmField->placeholder = 'Destination Folder for your generated favicons, webmanifest and browserconfig'; $fmField->columnWidth = 100; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon('folder'); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($tabOpener); $fmFieldgroup->add($filesOpener); $fmFieldgroup->add($fmField); $fmFieldgroup->add($filesCloser); $fmFieldgroup->add($tabCloser); $fmFieldgroup->save(); /////////////////////////////////////////////////////////////// // Experimental Markup Tests $wrapperFaviconMagic = new InputfieldWrapper(); $wrapperFaviconMagic->attr('id','faviconMagicWrapper'); $wrapperFaviconMagic->attr('title',$this->_('Favicon Magic')); // field show info what $field = $this->modules->get('InputfieldMarkup'); $field->name = 'use'; $field->label = __('How do I use it?'); $field->collapsed = Inputfield::collapsedNever; $field->icon('info'); $field->attr('value', 'Does this even begin to vaguely work?'); $field->columnWidth = 50; $wrapperFaviconMagic->add($field); $fmTemplate->fields->add($wrapperFaviconMagic); $fmTemplate->fields->save(); ///////////////////////////////////////////////////////////// // Create page $page = $this->wire( new Page() ); $page->template = MODULE_NAME; $page->parent = $this->wire('pages')->get('/'); $page->addStatus(Page::statusHidden); $page->title = 'Favicons'; $page->name = self::PAGE_NAME; $page->process = $this; $page->save(); } }  
×
×
  • Create New...