( ! ) Deprecated: strip_tags(): Passing null to parameter #1 ($string) of type string is deprecated in /home/jlahijani/Sites/goodui.org/site/templates/_og.php on line 13 Call Stack #TimeMemoryFunctionLocation 10.0000466104{main}( ).../index.php:0 20.05762253176ProcessWire\Wire->__call( $method = 'execute', $arguments = [0 => TRUE] ).../index.php:55 30.05762253176ProcessWire\WireHooks->runHooks( $object = class ProcessWire\ProcessPageView { }, $method = 'execute', $arguments = [0 => TRUE], $type = ??? ).../Wire.php:484 40.05762253592ProcessWire\Wire->_callMethod( $method = '___execute', $arguments = [0 => TRUE] ).../WireHooks.php:952 50.05762253592ProcessWire\ProcessPageView->___execute( $internal = TRUE ).../Wire.php:416 60.06302294152ProcessWire\ProcessPageView->renderPage( $page = class ProcessWire\Page { public $id = 3219; public $name = 'betterui-can-you-make-this-checkout-screen-better-balsamiq-template'; public $parent = '/blog/'; public $template = 'post'; public $title = 'BetterUI: Can You Make This Checkout Screen Better? (Balsamiq Template)'; public $post_tags = '(PageArray) 3152'; public $body_blocks = '(RepeaterMatrixPageArray) 6675'; public $date = 1536605812; public $comments = '(CommentArray) 637|636'; public $summary = ''; public $body = ''; public $data = ['title' => 'BetterUI: Can You Make This Checkout Screen Better? (Balsamiq Template)', 'post_tags' => class ProcessWire\PageArray { ... }, 'body_blocks' => class ProcessWire\RepeaterMatrixPageArray { ... }, 'date' => 1536605812, 'comments' => class ProcessWire\CommentArray { ... }, 'summary' => '', 'body' => ''] }, $request = class ProcessWire\PagesRequest { } ).../ProcessPageView.module:114 70.07392324288ProcessWire\Wire->__call( $method = 'render', $arguments = [] ).../ProcessPageView.module:184 80.07392324288ProcessWire\WireHooks->runHooks( $object = class ProcessWire\Page { public $id = 3219; public $name = 'betterui-can-you-make-this-checkout-screen-better-balsamiq-template'; public $parent = '/blog/'; public $template = 'post'; public $title = 'BetterUI: Can You Make This Checkout Screen Better? (Balsamiq Template)'; public $post_tags = '(PageArray) 3152'; public $body_blocks = '(RepeaterMatrixPageArray) 6675'; public $date = 1536605812; public $comments = '(CommentArray) 637|636'; public $summary = ''; public $body = ''; public $data = ['title' => 'BetterUI: Can You Make This Checkout Screen Better? (Balsamiq Template)', 'post_tags' => class ProcessWire\PageArray { ... }, 'body_blocks' => class ProcessWire\RepeaterMatrixPageArray { ... }, 'date' => 1536605812, 'comments' => class ProcessWire\CommentArray { ... }, 'summary' => '', 'body' => ''] }, $method = 'render', $arguments = [], $type = ??? ).../Wire.php:484 90.07402326248ProcessWire\Wire->__call( $method = 'renderPage', $arguments = [0 => class ProcessWire\HookEvent { public $data = [...] }] ).../WireHooks.php:1060 100.07402326248ProcessWire\WireHooks->runHooks( $object = class ProcessWire\PageRender { public $data = ['clearCache' => 1] }, $method = 'renderPage', $arguments = [0 => class ProcessWire\HookEvent { public $data = [...] }], $type = ??? ).../Wire.php:484 110.07402326664ProcessWire\Wire->_callMethod( $method = '___renderPage', $arguments = [0 => class ProcessWire\HookEvent { public $data = [...] }] ).../WireHooks.php:952 120.07402326664ProcessWire\PageRender->___renderPage( $event = class ProcessWire\HookEvent { public $data = ['object' => class ProcessWire\Page { ... }, 'method' => 'render', 'arguments' => [...], 'return' => NULL, 'replace' => FALSE, 'options' => [...], 'id' => 'Page:100.0:render', 'cancelHooks' => FALSE, 'when' => 'after'] } ).../Wire.php:416 130.07462327224ProcessWire\Wire->__call( $method = 'render', $arguments = [] ).../PageRender.module:575 140.07462327224ProcessWire\WireHooks->runHooks( $object = class ProcessWire\TemplateFile { public $data = ['wire' => class ProcessWire\ProcessWire { ... }, 'classLoader' => class ProcessWire\WireClassLoader { ... }, 'hooks' => class ProcessWire\WireHooks { ... }, 'config' => class ProcessWire\Config { ... }, 'notices' => class ProcessWire\Notices { ... }, 'urls' => class ProcessWire\Paths { ... }, 'log' => class ProcessWire\WireLog { ... }, 'sanitizer' => class ProcessWire\Sanitizer { ... }, 'datetime' => class ProcessWire\WireDateTime { ... }, 'files' => class ProcessWire\WireFileTools { ... }, 'mail' => class ProcessWire\WireMailTools { ... }, 'database' => class ProcessWire\WireDatabasePDO { ... }, 'db' => class ProcessWire\DatabaseMysqli { ... }, 'cache' => class ProcessWire\WireCache { ... }, 'modules' => class ProcessWire\Modules { ... }, 'procache' => class ProcessWire\ProCache { ... }, 'fieldtypes' => class ProcessWire\Fieldtypes { ... }, 'fields' => class ProcessWire\Fields { ... }, 'fieldgroups' => class ProcessWire\Fieldgroups { ... }, 'templates' => class ProcessWire\Templates { ... }, 'pages' => class ProcessWire\Pages { ... }, 'permissions' => class ProcessWire\Permissions { ... }, 'roles' => class ProcessWire\Roles { ... }, 'users' => class ProcessWire\Users { ... }, 'user' => class ProcessWire\User { ... }, 'session' => class ProcessWire\Session { ... }, 'input' => class ProcessWire\WireInput { ... }, 'buster' => class ProcessWire\ProCacheBuster { ... }, 'process' => class ProcessWire\ProcessPageView { ... }, 'page' => class ProcessWire\Page { ... }, 'options' => [...]] }, $method = 'render', $arguments = [], $type = ??? ).../Wire.php:484 150.07472328576ProcessWire\Wire->_callMethod( $method = '___render', $arguments = [] ).../WireHooks.php:952 160.07472328576ProcessWire\TemplateFile->___render( ).../Wire.php:413 170.15262885168require( '/home/jlahijani/Sites/goodui.org/site/templates/_main.php ).../TemplateFile.php:340 180.15352928480include( '/home/jlahijani/Sites/goodui.org/site/templates/_og.php ).../_main.php:64 190.15482929216strip_tags( $string = NULL ).../_og.php:13 " />

BetterUI: Can You Make This Checkout Screen Better? (Balsamiq Template)

I am creating and a better checkout screen template based on everything we know about checkout patterns and your help is needed. There is so much more that can be improved to make a better checkout experience (think which elements, copy, or interactions can be added, removed or adjusted). I'm willing to synthesize this knowledge in an updated template (with your and my own ideas) and to kick off the process I created a mediocre checkout template (in Balsamiq) to be used as a starting point for you to improve. You in?

BetterUI Checkout

Instructions

  1. Make Any Improvements To The Checkout Screen In Balsamiq or Your Chosen Tool
    Make any number of improvements to the above checkout screen (ex: improvements to the copy, elements, or interactions). If you have Balsamiq you can download and edit the checkout template we created. If you don't have Balsamiq, you can also use whatever program you have (including a simple pen and paper sketch) as long as you export to a flat JPG or PDF that I can read. Last, it your ideas is super simple, you can also just leave a comment on this blog post.

  2. Describe Your Suggestions
    For each improvement: label it as a CHANGE, ADD or REMOVE, and then describe why you think it's an improvement.

  3. Share & Upload Your Ideas
    Share your improved checkout version with me using this submit form. I will do my best to publish it here, and turn selected ideas into new UI patterns (with credit to you).

Let's Do This To Learn From Everyone's Ideas

I want everyone to learn from your ideas (which I will try and publish here on our blog). At the very least we'll generate new UI patterns (that can be attributed to you and evaluated by others in future tests). Finally, I will also revise this mediocre template into a better one (based on your and my own ideas) and then share it back.

Get Started & Share Your Ideas For Improving This Checkout Screen

You can use the Balsamiq template we created, your own tool or simply leave a comment below.




Comments

  • selman

    selman 7 years ago 00

    People might use a credit card not on their name. For that case, to somewhere around the credit card line you can add a checkbox or button next to a text box saying: Are you using a credit card not on your name? [Yes] -> then another line for credit card name shows up to fill.

  • Drew

    Drew 7 years ago 00

    I'm a fan of consolidating the shipping address into a single field with autocomplete. It's faster to fill out, but it's also less visually daunting when you get to the page.