Publication, Edit, and Media Flow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
Publishing a post with a captioned gallery is a litmus flow. This flow exercises the heart of what we’re making. Always be watching and improving publication flow. Continuously and recursively dogfood these flows.
- The Top 5 Impediments to Flow on Touch Devices serves as a roadmap for improving touch interactions, particularly in publication flow.
- The “Mobile and Touch” windmill Adapted from Don Quixote, a windmill in the context used on make/flow is a long term goal or vision that you never stop pursuing while attempting to gradually, steadily change a system. Actions taken toward a windmill's goal are called tilts. Tilts over time steer change. The Flow Patrol windmills are listed here. below impacts publication flow.
- The “Carousel and mobile image handling” windmill impacts the consumption side of media flow.
Links: make/flow/#editor, components/editor, make/flow/#media, components/media, make/flow/#post-flow
Kibbling Kibbling is the process of dogfooding a flow and publishing visual records and narratives of that dogfooding. The make/flow blog is an example of a kibbling blog. Since we are publishing these “kibbles” with the software we are dogfooding, the act of kibbling further dogfoods the software. Kibbling encourages more dogfooding which encourages more kibbling and so on. and Visual Oxygen
If communication is oxygen, then communicating with screenshots and visual records is Visual Oxygen. Accompanying tickets and chats with screenshots makes development more accessible and transparent.
Kibbling is the process of dogfooding a flow and publishing visual records and narratives of that flow. The make/flow blog is an example of a kibbling blog. Since we are publishing these “kibbles” with the software we are dogfooding, the act of kibbling further dogfoods the software. Kibbling encourages more dogfooding which encourages more kibbling and so on. Continuous recursive dogfooding and continuous visual recording is the flow patrol Flow patrol is the regular exercise and monitoring of important flows. Issues found while on flow patrol are kibbled and ticketed. Continuous flow patrol encourages use of our own software and increases awareness of what our users are experiencing day to day. Flow patrol duties are outlined in the flow handbook. prescription for improving development culture, particularly on mobile.
Whenever UI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. changes, posting before and after screenshots should be a reflex. Every patch should be accompanied by screenshots. Any ticket lacking screenshots should be tagged needs-screenshots.
For feature plugins and significant patches, before and afters on multiple devices should be published to make/flow prior to commit. This is a commit requirement. While you’re testing, take some screenshots.
The ideal: Teams take screenshots as they dev and test (on their multiple devices). They post those screenshots as comparison visual records using the tool we’re all making, WordPress. Chock full of virtue are those two simple acts. Change awareness. Flow awareness. Flow comparison When an existing feature changes or is replaced, a flow comparison visual record is made to compare flow through the old interface with flow through the new interface. Seeing two flows side-by-side helps determine whether the new interface actually flows better.https://make.wordpress.org/test/tag/flow-comparison/. Recursive dogfooding. Visual archiving. An engine for Empathy, Awareness and Visual Oxygen.
Links: glossary/kibbling, glossary/visual-oxygen, make/flow, make/flow/handbook
Moar checklists. Check out The Checklist Manifesto. Cognitive nets help flow.
Beta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Testing Flow
We want beta testing to be easy. The beta testing handbook page describes how to get started with nightly builds. The 4.4 tracking page describes the teams working on 4.4 and how to help them. It also lists the feature plugins scheduled for 4.4. The component pages provide details on component teams and how to help them. All of these resources need to be expanded and kept up-to-date.
Feature plugins should be listed here and updated regularly, preferably nightly.
Finding maintainership for the beta tester plugin is important. It has bugs and lacks features. Watch the forum.
Tag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post. tickets and posts related to beta testing flow with beta-testing-flow.
We have okay documentation for testing against nightly builds but pretty much no documentation for testing patches. The core handbook has little to say about patches.
Teams should publish calls-for-testing to make/core Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
- Public app beta testing flow. https://wordpress.slack.com/archives/mobile/p1455728774000008
- Joining the Android beta testing program. https://make.wordpress.org/test/2016/02/10/joining-the-android-beta-program/
- Patch testing with VVV on Mac OS. https://make.wordpress.org/test/2016/02/08/testing-patches-with-vvv-on-mac-os/
- Smooth switching from trunk nightlies to point release nightlies. https://make.wordpress.org/core/2016/02/01/4-4-2-release-candidate/#comment-29185
- “We have an audience of auto-updating nightly build testers who are also running feature plugins. Don’t fatal their sites, whatever it takes.”
- Add needs-screenshots to workflow keywords. https://meta.trac.wordpress.org/ticket/1227
- Android beta audience. https://wordpress.slack.com/archives/mobile/p1441297947000043
- Handbook pages and beta testing flow. https://wordpress.slack.com/archives/core-flow/p1441632959000004
- Call for component page updates and component roadmaps. https://make.wordpress.org/core/2015/09/02/component-page-updates-for-4-4/
- s/nightly/continuous/ Nightly builds should be continuous. https://wordpress.slack.com/archives/core/p1436474787003853
- Call to document grunt and patch testing flow. https://make.wordpress.org/core/2015/07/08/dev-dependency-updates-for-4-3-have-been-completed/#comment-26302
- #32613 is fixed. Switching a site between production and nightly is now a push button affair.
- Maintaining core component pages
- Added more detailed steps for installing the beta tester plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to the beta testing page on 2015/06/26.
- Opened #32551 – Superseded feature plugins should suggest deleting the plugin in the auto deactivation notice
Opened #32613 – Allow easy fallback to the latest stable release when beta testing with the beta tester plugin
Links: core/trac/#beta-testing-flow, meta/trac/#beta-testing-flow, make/flow/#beta-testing-flow, make/core/#beta-testing-flow, test.wp.com/#beta-testing-flow, make/core/handbook/beta/testing
Feature Plugins (todo: rework for feature projects)
Feature plugins greatly improve beta testing flow. Promote developing features as feature plugins and help feature plugins get through the process.
- Keep feature plugins up to date and issue calls for testing. https://make.wordpress.org/core/2016/01/27/feature-plugin-chat-notes-for-jan-26/#comment-29157
- Break the feature plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. checklist into separate merge criteria and merge checklist sections.
- Create a template/starter feature plugin. https://wordpress.slack.com/archives/design/p1441906358000095
- Feature plugins should turn themselves off gracefully once their feature is merged to core. They should not fatal error.
- We need a method for disabling featured plugins once they’re merged.
- We need to create a commit checklist for feature plugin merging. Here might be a good place to add it.
Links: plugins/beta, meta/handbook/feature-plugin-treatment, make/core/#feature-plugins+kickoff, make/core/#feature-plugins+merge+proposal, make/core/#feature-plugins+updates, make/core/#feature-plugins+chats, make/core/#feature-plugins
Mobile and Touch Usability
We are an open source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project dedicated to the open web, regardless of device. That is part of our philosophy and soul. We will not force our users into walled gardens. Championing the open web on all devices is our duty.
- Improve consumption flow with better touch media.
- Editor scrolling on iOS The operating system used on iPhones and iPads. is now fixed. This is part of #2 on the top five list and is a huge iOS usability improvement.
- #5 on the Top 5 List, list table truncations, is now fixed.
- #3 on the Top 5 list, Dismissing submenus on touch devices, is now fixed.
- The Top 5 Impediments to Flow on Touch Devices
- make-flow tickets.
iOS and the Open Mobile Web
iOS compromises the open mobile web. iOS Safari has many bugs that corrode the usability of WordPress. How can we make that better?
Presenting a bare image page with no navigation in response to tapping an image is not good flow, particularly on touch devices. Modal/carousel treatment for images should be provided out of the box. When using Twitter, we run into this windmill often. So many WP sites have no modal/carousel treatment for images. Even ones with Jetpack have treatment only on galleries, not individual images. When visiting WP sites from Twitter and other apps, better image handling is expected. Image treatment is out of touch with touch flow.
- #31467 is fixed in 4.4.
- Images should default to not linking https://core.trac.wordpress.org/ticket/31467
- Lack of modal image handling on make/core posts. https://wordpress.slack.com/archives/core/p1436997541001029
- Carousel feature plugin suggestion. https://make.wordpress.org/core/2015/07/10/feature-plugin-chat-on-july-14/#comment-26336
- Opened #33766 – Update notice links to an uncompelling codex page. Tagged it #update-flow.
- Improve flow from the update notice; make pre-update screens, docs more compelling. https://make.wordpress.org/test/2015/08/18/upgradeinstall-update-from-an-update-notice-macnchrome/
Related links: make/flow/#updates, make/flow/#upgrade-install, core/trac/#update-flow
If you’ve been around awhile, share what you remember. If a chat, ticket, or post needs some history, give it.
- Image title attributes and displaying tooltips. https://core.trac.wordpress.org/ticket/18984 and https://twitter.com/rboren/status/274633336209682432
- The origin of pinking shears. https://wordpress.slack.com/archives/design/p1436555223001635
- Why the updates icon is top-level in the toolbar. https://core.trac.wordpress.org/ticket/32678#comment:24
- The history of visit site in the admin header and WordPress > Network > Site hierarchy in the toolbar: https://core.trac.wordpress.org/ticket/32678#comment:32 and https://core.trac.wordpress.org/ticket/31650#comment:21
- Why visit site in the Home toolbar menu acts the way it does on touch devices. #desktop-bias https://core.trac.wordpress.org/ticket/32678#comment:35
We must communicate these better.
- Express each new feature in a release in the context of a roadmap and a vision.
- https://wordpress.slack.com/archives/core-flow/p1441647800000033 “Getting teams to update their component pages with what they’re up to for 4.4 would assist beta testing flow and encourage communicating roadmaps and visions.”
- Releases needs a focus and tagline. https://wordpress.slack.com/archives/core-flow/p1441647178000032
Links: make/core/#roadmaps, components
PHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. Version Requirements
- #meta802 Requirements page should recommend supported and secure PHP and MySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. versions
- These two comments should become core handbook pages.
Trends, Patterns, Tropes, and the Language of Flow
Note common usability problems such as #boxed-input-scrolling, #rogue-cursor, #keyboard-flyup, and #scroll-bleed and add them to the glossary. Use these tags on tickets and make/flow posts during triage. Help develop the language of flow.
- Consider adding go-back-flow, sideways, image-rotation, tap-bleed, elastic-bounceback, new-tab-window (instead of open-in-in-new-window), flow-home, no-title, switch-site, menu-dismiss, publish-context, post-flow, needs-responsive, needs-*, parity, feature-plugins
- Added Visual Oxygen. Need to work this more into the kibbling documentation. Kibbling is an engine for visual oxygen.