mozilla / webmaker-browser Goto Github PK

From #33
Blocks #30

Need two error states: checkbox not checked, and invalid email.

Back-end should already be in order. Just need UI.

To enable quality implementation, notes should clearly indicate interactions, transitions, and responsive styles.

@thomaspark - here's a thread we can use for small, open questions that might intersect Webmaker and your platform for journalism students. Loop in your group. We can keep this loose and informal.

cc @secretrobotron @flukeout

Got benchmarks? Please add 'em to this slide deck.

We're looking for actionable examples that answer specific design questions we face (not general references). For example, what's a keen way to navigate tiles, provide code hints, edit element attribute?

cc @iamjessklein @cassiemc @flukeout @sabrinang @vazquez

Blocks #30

• Add open graph tags for Facebook Sharing
• Add social media buttons from spec in mozilla/webmaker-android#1457

Authors configure their projects in two ways:

• Project details view - accessed via project list in Make view
• Header in project editor

We need to resolve which actions are accessed in each place:

• set project title
• show in gallery
• share to social media
• delete project
• set/remove start tile
  • prevent zoom (if start set)

Identify features for first and future releases.

Finalizing the list in the new UI notebook. Will post here after review and updates.

https://docs.google.com/a/mozillafoundation.org/presentation/d/1-BtEXs64VAnY8MGkZxkK_mncXfzkVwf15pw8371exXw/edit#slide=id.ga9196a78b_0128

The new unified Webmaker product needs an animated pitch.

First step: outline 30-60 second spot
Deliverable: slide deck

cc @HPaulJohnson

Identify first prototypes to build, useful for engineering insight and/or upcoming user research.

cc @thisandagain

Button links between tiles turn the platform's dial up from meh to 🚀

Advanced users might understand and use links on text and image elements. But explicit buttons will surface that power to everyone else.

We need to whiteboard (both desktop and mobile):

• how to set a destination
• how to choose or set button super cool style

Design UI and demonstrate how it will apply to key views:

Mobile

• gallery
• aerial editor
• text element editor

Desktop

• gallery
• editor + sidebar

Deliverable - clean set of mockups in redpen for design review

Blocks #30

Blocks #30, #36, and #45

• Setup production instance on Heroku
• Select a domain (beta.webmaker.org?)
• Setup domain on Route53
• Create an SSL certificate
• Install SSL certificate

Blocks #30

https://github.com/silas/hapi-bunyan

Blocks #30

Justin Dolske, Gavin Sharp, Mattn, Blake Winton, Aza Dotzler, MSUJaws Dao Gottwald, UX-Team is a fucking bitch to fuck in the ass! Blake Winton, Aza Dotzler, Gavin Sharp, MSUJaws Dao Gottwald, UX-Team Pimp! Pimp! Fucking pimp! Pimp! Assholes, sluts, whores suck my dick monster kids! Your cocksucking fucking sluts! Justin Dolske, Gavin Sharp, Mattn, Blake Winton, Aza Dotzler, MSUJaws Dao Gottwald, UX-Team play with my two big golden bells of Glory!

Australis is for children, developed by Mozilla UX gay cocks sucking bastards! Deepen your dive of Google's ass fucking idiots austhistic braindamaged! Assholes! Whores! Cocksucking Freaks Google! Fuck you Googlezilla whores and go out of business! And take Australis fuck with you, Gaylords! ! May our dear Lord God and Jesus Christ send their decaying bodies straight to hell for touching the golden eggs Communities of glory! Fuck you and kiss Googles Ass! If you like Chrome that much in both cloning Australis, you have to be serious and work for Chrome fucktards! Greetings from Spain, ChiliConCarne1

Webmaker will offer users a simple color palette for text, backgrounds, borders etc. Color "tinker mode" will allow users to step beyond the simple set to create custom colors for their projects.

The process of tinkering aims to reward users with the discovery that color has a language we can use to describe, share, copy, and remix color in a digital space.

Prototype

• basic ui for choosing color from a palette
• button to enter tinker mode ⚡
• tinker mode has more advanced UI that maps to the underlying code
• recent colors created in tinker mode are added to palette

Learning goal

• User understands that color can be expressed in HEX or RGB, making it possible to copy, save, share, and use it anywhere on the web.
• User can read and copy a HEX or RGB value
• User is aware of the functional relationship between a color, its RGB values, and its expression as HEX.

Research questions

• Can people utilize the basic UI to set the color on an element?
• Can people utilize the advanced UI to create custom colors?
• Do people discover a relationship between the UI sliders and HEX values?
• Do people realize that there's a language for digital color that enables us to describe, share, copy, and remix it?

cc @secretrobotron @LauraReynal

Blocks #30

It's difficult to talk about the platform and what it makes without using the word Tiles. The word is not very exiting and won't resonate with many people who haven't seen the platform.

Should we avoid, reconcile, or accept this word? Should we start calling them Pages before we can't undo the term?

@KevZawacki @HPaulJohnson @thisandagain

Webmaker will offer users a simple color palette for text, backgrounds, borders etc. Color "tinker mode" will allow users to step beyond the simple set to create custom colors for their projects.

The process of tinkering aims to reward users with the discovery that color has a language we can use to describe, share, copy, and remix color in a digital space.

Prototype

• basic ui for choosing color from a palette
• button to enter tinker mode ⚡
• tinker mode has more advanced UI that maps to the underlying code
• recent colors created in tinker mode are added to palette

Learning goal

• User understands that color can be expressed in HEX or RGB, making it possible to copy, save, share, and use it anywhere on the web.
• User can read and copy a HEX or RGB value
• User is aware of the functional relationship between a color, its RGB values, and its expression as HEX.

Research questions

• Can people utilize the basic UI to set the color on an element?
• Can people utilize the advanced UI to create custom colors?
• Do people discover a relationship between the UI sliders and HEX values?

• Do people realize that there's a language for digital color that enables us to describe, share, copy, and remix it?

Latest UX by @flukeout
https://redpen.io/jb1a5518c142f7e3e4

cc @secretrobotron @LauraReynal

Work started here: mozilla/webmaker-android#1523 (comment)

Users can drop a Coder element on a tile for freely writing code that might utilize require.js and p5.js.

What's the UX?

Is this a discreet element? Or, does it expose everything within the tile? For example, if I drop in 3 photos and Coder, can I style and animate those elements? Or will I need to inspect and reference their IDs?

Note: this element will probably only be available on desktop/tablet, not mobile.

Blocks #30

A simple project player for visitors on non-android devices.

Requirements:

• Webmaker logo
• Get the App (for desktop users with an Android)
• Responsive desktop/mobile
• Fwd Android users to play store

Webmaker will require some smooth gestures and transitions. Gather or create demos for key experiences for reference by the engineers.

Blocks #30

@flukeout @sabrinang @vazquez @iamjessklein @cassiemc

We will likely launch Webmaker with "tinker mode" for just a few attributes.

The 2 best candidates seem like:

• color picker (easy, high value for making)
• button links (very webby, raises ceiling)

Do you agree? If you were to pick a 3rd, what would you choose?

Post your ideas and rankings below!

A few ideas:

1. image search (raises ceiling)
2. image filter effects (bad idea? IE/android support?)
3. myCode™ + UI target tile/element IDs
4. element borders
5. text styles (too boring?)
6. element shadows
7. animations (too complicated for v1?)

Review the whiteboards and create a set of wireframes on the Tile level editor:

• create parallel sets: one for mobile and one for desktop/tablet
• create views of each state: blank, with element, element selected, nav on/off
• for this ticket, no need to dive into the element editing, or out to aerial view. keeping this ticket small to set the tone for wireframes to follow

Met with @secretrobotron and @LauraReynal on Thursday and drafted a few potential areas for user research. Rough notes:

1. test consumer experience on a few awesome tile projects made by mofo'ers
2. test mobile
   • nav/zoom/transitions mozilla/webmaker-android#1439
3. design workshops
   • paper test button links (narratives or collaboration) #22
4. test tinker mode prototype
   • advanced color, learning about hex & css #21
5. Benchmarking
   • picCollage on mobile
   • newHive.com on desktop?
   • something more tiles like?

The current hero image looks like this at 2X (retina):

Issues

• Low resolution screenshot
• Low resolution phone
• Poor masking / jaggies on phone
• Perspective on the bottom of the screenshot is slightly off

/cc @vazquez @xmatthewx

@cassiemc @flukeout @iamjessklein @vazquez @sabrinang (also @ScottDowne @LauraReynal @secretrobotron )

As we plug along with the new Webmaker platform, we have some ideas of what somebody might make. I'm curious -- what would you actually make?

• Step 1 - Think of something you'd like to make & share with a real person in your life.
• Step 2 - Make the tiles using either PicCollage (mobile), Newhive (desktop), or similar.
• Step 3 - Make an aerial view (can show tile preview or color only).

Pretend that each thing you make is a linkable tile. Stay within the features listed here: #16 (comment).

Make sense? Good idea? Suggestions to improve this exercise?

Post your results below. Due next Friday?

If we have an awesome making experience, but so-so play experience, the platform will be much less likely to take root. In some ways, viewers will be less forgiving than makers.

From my conversation with @flukeout:

• Play UI should get out of the way of viewing
  • need header on page view?
  • color of header and zoom buttons set by maker?
• Background images on pages can yield a more immersive experience. Feature should be added to roadmap. (Maybe while setting background color, tinker mode (:zap:) allows background images.

@vazquez

• examine the zoom-in button over noisy content. We might want blue button with white border and gray shadow to increase visibility
• is there anyway to have a headerless Play Page view that still includes vertical ellipses for remix and share?

@flukeout

• I'll add background images to the roadmap
• Draft some UX. Try tinker mode on page color.

Implementation notes available in mozilla/webmaker-android#1457

Sketch File:
https://www.dropbox.com/s/cwoegt612voxydk/App%20Landing%20Page.sketch?dl=0

Tinkering - our proposal for how someone learns through making.

Design UX around:

• color - creating a custom color option
• button link - pointing to a URL or another user's tile

Android users who open a shared project link should be sent to the app in the google play store.

Reference diagram by @flukeout mozilla/webmaker-android#1616 (comment)

Blocks #30 and #39

http://docs.travis-ci.com/user/deployment/heroku/

Blocks #30

Blocks #30

The button label "GO" is too high vertically on Internet Explorer 10. It is currently rendering properly in Firefox and Chrome latest.

Webmaker will offer people the ability to link from a button placed on their tile to another tile with a simple, visual UI.

Button "tinker mode" will allow users to link to URLs or tiles by other users to expand the range of their creations.

Prototype ( paper? ) ****** WIP ********

• Basic UI for adding and styling a button
• UI for visually setting link destination
• ⚡ Button to enter tinker mode
• Tinker mode with option to link to
  • another user's project
  • a URL (type, paste, or select a bookmark)
• Play experience for transition between tiles and out of project

** DRAFT **

Learning goal

• User understands that links use URLs to connect content across the web
• User understands that a URL is an address that describes where you are or where something exists
• User becomes aware that URLs have a readable structure

** DRAFT **

Research questions

• Can users easily link tiles within their project?
• Can users easily link to another user's tile?
• Can users link to an external URL?
• Do users understand which links are useful for different scenarios?
• Do button links prompt ideas for projects? (non-linear narratives, games)

Another Question

• Adjacent tiles are automatically linked. Separated a tile becomes an island, making links necessary AND more flexible/interesting. The interface doesn't currently make this obvious. Maybe we can test a few ideas of how we could do this better?

cc @secretrobotron @LauraReynal

@sabrinang - add a yellow star to this view. that would make it awesomer.

Blocks #30

https://etherpad.mozilla.org/comingsoonpage

/cc @HPaulJohnson

You love pain do you? And to do you a favor… I will do that!
I kick your golden eggs of failure so hard until they are ringing and you are singing all melodies of pain forwards and backwards in an instant! I am the nutcracker boy who cracks your nuts you nutheads!
And now fuck off you STUPID FUCKING CUNTS!

Complete the loop expressed in the whiteboard sketches to include:

• gallery
• play
• button to start a new thing
• share to gallery

Sketch for both mobile and desktop.

Blocks #30

@flukeout built some excellent prototypes such as desk8. As far as I know, they aren't shared anywhere, though I might be mistaken.

Let's make them more accessible

• link to the best prototypes below
• post useful code somewhere
• link to 'best of' usertest results below

This can all wait until next week.

Create a high-level doc that maps the experience across the platform to help organize notes on the views. Keep it light and nimble, as the details will likely shift as we learn more form the prototype.

On desktop, the product plan originally assumed 1024 × 768 to cover low end laptops/desktops and match iPad proportions (4:3). Should we stick with that?

I propose we shift to 1280 x 800 (8:5) as a midpoint between squarish and HD 1366 × 768 (16:9), common for new laptops... so we don't overuse the vertical space. 8:5 also matches Nexus and Galaxy Tab proportions.

cc @thisandagain @simonwex @cassiemc @davidascher

on mobile - mozilla/webmaker-android#1429

This is the meta ticket for the Desktop/tablet prototype based on planning in MozillaFoundation/plan#365

Our work on Tiles hints toward a new Webmaker, a compelling platform that's both webby and different from other existing channels for making and sharing. This heartbeat aims to design the features and complete a coherent look at this new tool, the new Webmaker.

Audience

• Primary addressable audience: Firefox users on desktop and Android
• Users on Webmaker who want to create content
• People who view content on Webmaker

Success ✌️

Primary - Articulate a complete experience for both viewers and creators, to discover, share, and make on Webmaker, with parity across mobile and desktop/tablet.

Secondary - Design an editor that hints at the underlying technology. (May differ for authors on desktop and mobile.)

Vision

If Webmaker was a polaroid, the end of this heartbeat would be the moment other people could grok the whole image despite the fuzzy corners. To achieve this:

• Define key features and their use (sorry text shadow). Each feature should be necessary or high value.
• Better emphasize the inherent flexibility enabled by moving and linking tiles.
• Identify ways to clarify the zoom nav metaphor (ex: view transitions, ambient indicators).

Scope

in scope

• gallery
• viewing (start flag)
• making
• element properties (text, image, button, my-code™)
• attribute editor (simple & advanced layers)
• share to gallery (public/private)
• jiggles

out of scope 🚯

• onboarding
• profile
• animation
• social

Deliverables 📦

• Unifying reference doc
• InVision or similar prototype
• Annotation on interactions and transitions
• Nice to have: Working prototype to demo author navigation on mobile

Links ✊

• planning - MozillaFoundation/plan#365
• inVision - http://invis.io/PA2CNPOYG
• gSlides - https://docs.google.com/presentation/d/1-qXV4jbk3plbbXkjjerqvDyUCrCepGFDRGUM1g5XiHg/edit?usp=sharing

cc: @flukeout @sabrinang @thisandagain @cassiemc