Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Competitive analysis #4

Closed
melchoyce opened this issue Apr 28, 2019 · 12 comments

Comments

@melchoyce
Copy link
Collaborator

commented Apr 28, 2019

We'll use this to compile research and screenshots.

@karmatosed karmatosed referenced this issue Apr 28, 2019
1 of 1 task complete
@eviolini

This comment has been minimized.

Copy link

commented May 1, 2019

Screenshots of the UI from block plugin Ghost Kit. The plugin has several patterns that lend themselves to editor-side block selection, and potentially, installation.

Using the Inspector Controls area, the user is presented with three panels.
screenshot-membersrocket com-2019 04 27-16-01-45

The Template panel allows the user to select a template type from a drop down. Those templates are complete page setups or grouped blocks that can be added to the page.
screenshot-membersrocket com-2019 04 27-16-17-13

@karmatosed karmatosed added this to Prioritised in V1 May 8, 2019
@karmatosed

This comment has been minimized.

Copy link
Member

commented May 8, 2019

Is there a list of products you'd like to view for competitive analysis? It might be good to ask in next week's design meeting for people to either pick one from the list to screenshot. Similarly, it might be good to ask if anyone has any to add to mix.

@karmatosed karmatosed added this to the Research milestone May 8, 2019
@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 8, 2019

Good question, and the answer is, I'm not sure. I think finding some good examples of in-app purchases, especially apps that let you preview the feature you're purchasing ahead of time, would be good inspiration. Pretty much any freemium product that lets you preview before purchasing could work.

@mathetos

This comment has been minimized.

Copy link

commented May 9, 2019

Similarly, the "Gutenberg Blocks Template" plugin initially comes with ZERO block, but once you open their Gutenberg sidebar panel, you can import the "designs" -- which are essentially sections of Core blocks styled with custom classes and a CSS template.

image

So, in terms of existing UI of Gutenberg there seems to be two obvious places where new block discovery/installation can happen:

Sidebar Panel

Like the Ghost and Block Templates plugins above, adding a custom sidebar to allow for block discovery/installation seems consistent with existing Gutenberg patterns.

PROS:

  • hidden unless clicked on
  • Lots of vertical space for controls
  • Consistent with existing Gutenberg UX

CONS:

  • narrow horizontal space
  • being hidden means it might not be found
  • similar space problems users experience currently with the Customizer, particularly when choosing themes in the Customizer

Modal Popup

The space problems with a sidebar panel can be overcome with a modal popup.

PROS:

  • Breaking out of the editing experience provides a visual cue that the actions being taken are different from editing/content creation. Good separation of concerns.
  • A modal can have more horizontal space for more flexible layout of the search and block choice options.

CONS:

  • How will the modal be triggered? It might be very difficult to discover
  • It's a new UX for users, that might be jarring

Summary

Overall, I'm not convinced that block discovery/installation should be happening in the editor at all. So, just voicing those concerns (like I have already a few times on make.wordpress).

But if it's happening no matter what, I wanted to provide constructive feedback as early in the process as possible. Thanks for your leadership and initiative on this @melchoyce and @karmatosed !

@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 13, 2019

Jetpack has recently been looking at how to handle blocks only available in paid plans, and I think there are some ideas we could potentially adapt:

0 1 message-in-editor
0 2 message-in-editor

These two ideas in particular fit well into existing Gutenberg patterns:

screenshot-2019-05-10-at-13 48 31-1

upgrade-block

I can easily imagine something like...

"This is a preview of the (Name) Block. Install to use it on your site. [ INSTALL ]

@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 13, 2019

@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 14, 2019

Search → Take action from results example:

image

https://www.pttrns.com/applications/584

@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 14, 2019

Search results, with people you follow and people you don't follow:

https://mobile-patterns.com/iphone/snapchat/misc-gesture-transition-730

@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 14, 2019

More search results that mix stuff you have/stuff you don't have:

https://mobile-patterns.com/iphone/vine/engagement-and-retention-microinteraction-search-438

@karmatosed

This comment has been minimized.

Copy link
Member

commented May 16, 2019

Some 'wide' examples of searching and suggestions:

Bear:
2019-05-16 at 18 38

image

Apple:
image

Monzo:
image

WordPress mobile app:
image

Monday:
image

image

Searching animation: this moves around showing sections
image

Medium:
image

image

Reddit:
image

image

Twitter:
image

Pocket:
image

image

Thoughts:

  • There are some interesting spaces to explore in discovery such as for content in Pocket or Medium.
  • Searching for contacts/friends is also a really interesting space to find patterns
  • How can delight like Monday's animation or the reddit empty state be added?
@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented May 17, 2019

Wrote up a post summarizing these: https://make.wordpress.org/design/2019/05/17/block-library-competitive-analysis-recap/

Closing to mark as complete, but feel free to add more examples here or to that p2 post.

@melchoyce melchoyce closed this May 17, 2019
@melchoyce melchoyce moved this from Prioritised to Done in V1 May 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
V1
Done
4 participants
You can’t perform that action at this time.