Specific types of create UIs:
- create event
- 1 IndieWeb Examples
- 2 Mobile
- 3 Silo Examples
- 4 Brainstorming
- 5 See Also
For screenshots see:
Notes and Photos
To bookmark a page (create a bookmark post on his own site), Aaron uses:
- a bookmarklet to activate quill.p3k.io/bookmark with the URL to bookmark pre-filled in
- quill uses micropub to
- create a bookmark post on his site.
Previously, Aaron's software included a creation interface. Old screenshots can be seen at p3k-v1.
- The circle-in-circle is for geolocation: clicking it on uses the browser geolocation API to set the location of the post.
- The tickbox for Twitter lets him decide whether to syndicate the post to Twitter or not.
Jeena's posting interface (project unnamed)
Since 2014-05-27, Jeremy Keith's note creation UI ("simple update form") on his home page when he's logged into his site adactio.com:
and adactio photos
You can barely see the UI with the addition of a "Choose File" HTML file input, in the second window on his laptop screen here in this photograph:
per silo POSSE toggles
He then subsequently ~2014-10-01 added the ability to selectively (per post) toggle POSSEing to Twitter and/or Flickr (both default on).
Jeremy has also open sourced these animated sliding toggles:
- http://jsbin.com/rugonu/6/edit <-- try it for yourself
Note the simple one big text box with big "Post it" button as the focus of the UI, with minor optional elements to add media and tags, all inline above the most recent posts for context.
Mobile note creation is particularly challenging for various reasons:
- less reliable network (thus possible loss of user data if depending on JS / AJAX)
- smaller displays (less space to see what you're typing)
- touch keyboards (clumsier / less accurate than physical tactile keyboard)
Facebook, at the top of your profile/wall "timeline" presents a UI for creating a new post with three explicit post-type options:
- Status | Photo/Video | Life Event
With "Status" chosen by default, and the prompting text: "What's on your mind?"
FB activate create
If you activate the text area (where the default text is), new options are provided below it:
The icons represent (and show as tooltip text if you hover)
- "Add photos to your post"
- "Tag people in your post"
- "Add what you're doing or how you're feeling"
- "Add a location to your post" (auto-filled with a city name, and showing a close box to remove)
- "Set date and time of your post"
- Who should see this? Public, Friends, Only Me (default), Custom, school, company1, company2, ... companyN
FB Text size adjustment while typing
The text area has a variable text size that depends on how long the status update you are creating is.
FB Life Event
Selecting "Life Event" expands the create box into a set of categories to choose from:
- Work & Education, Family & Relationships, Home & Living, Health & Wellness, Travel & Experience
FB reselect status
If you now reselect "Status" - it activates the text field, and shows the same status options as noted above.
FB create bgcolor
When creating from the home page instead of your profile (n.b. I found this true from profile also - Tantek Çelik), the interface is slightly different. It also includes an option to select background color. After clicking "Background Color" you have several color options to choose:
FB create new feature
Sometimes Facebook adds a new feature to their create UI, and notifies you with a little blue mini-overlay:
Event creation UI is only present contextually, when viewing your events or your calendar.
- facebook.com/username/events ->
[ + Create Event ] [ ✏️ ]buttons (the pencil button is for "Manage" - not sure what that means
- https://facebook.com/events ->
[ + Create ]button in the left column
Clicking "+Create [Event]" presents a dialog to enter event details:
Event public/private options:
- Private Event with "Guests can invite friends" (default)
- Private Event - only hosts can invite friends
- Public Event - anyone can view it, even without being logged in
For more details, including issues, duplicate event which itself can cause cryptic errors like "Something went wrong", "Warning Slow Down", and having events created despite error messages, see:
Google Calendar has the ability to create an event from brief plain text like expressions like "Dinner tomorrow night" — need a citation / documentation of actual plain text expressions supported by Google Calendar.
Amazon Reviews provides a UI to create reviews about products. It begins by prompting you to choose a star rating, and then progressively adds fields as you complete each step.
LinkedIn has a publishing interface for posting articles. It supports adding the following elements:
- upload a cover image
- post body, prompting with "Write here. Add images or a video for visual impact."
The content section allows simple formatting options:
- header level: 1, 2, 3
- bold, italic, underline
- numbered and bullet lists
Suggest better prose
Ideally a text-entry box would auto-suggest ways to improve your prose.
- Tantek Çelik: collecting resources and ideas in my own "Working On" here:
Some of the above #IndieWeb_Examples have photo post creation UIs inline, typically as extensions to note creation UIs.
This section is for brainstorming about photo-centric creation UIs.
Brainstorming of UIs to create photo posts.
See: photo upload for the process/challenges of uploading a photo to your server.
A possible UI flow for a low-perceived-latency photo post creation experience:
- user chooses photo to post. web app immediately starts uploading it to the server in the bg.
- user filters / crops the photo. web app captures the sequence of filter/crop instructions, and when the user is "done" editing, web app sends that instruction sequence to the server.
- server applies the filter/crop on its end
- user adds person-tags, text content (caption) etc.
- user taps "post" or whatever, and only that text is left to send, everything else is already at the server, and the post appears *immediately*
You could maintain the sequence of filter/crop instructions purely as CSS filter and crop (width, height, object-fit:cover, object-position) properties and values, using them to display the image clientside, and serve that CSS from the server to make people's browsers do that filtering/cropping for you so you don't have to actually use ImageMagick or other server-side image manipulation software.
- Actual amount of metadata required for correct microformats markup is minimal but often the number of file systems required by many OSS CMS solutions complicate the workflow.
- Having a writing UI that just accepted plain HTML and required the user to include microformats2 maybe a an attractive use case.
- Would need to know how much templating to include, top level h*?
- Would want to be able to parse urls for some post types likes, bookmarks, etc
Here are some libraries/resources to apply filters to images:
The CSS Filter feature allows you to do all sorts of image manipulation effects on images: