view as:
summary
full text
list
bullets
filter by:
summaries
none
  • 1 year ago - link
    by @ghost

    Rixfeed Dev Log

    Note from the author: I include links out to other pages that are usually an aside and optional to explore. Should a resource be necessary for your continued understanding of the article, I will let you know. I hope, when you are reading this, that the features that power it still work. As you may well know, I'm currently in the process of building rixfeed, and while I try to design with backwards compatibility in mind, it's difficult maintaining features that you yourself personally forgot about. As of August 21st 2023, it works.

    [bins-0]

    The Bin System UX Pattern

    This post is an interactive exploration of an experimental UX pattern tentatively named "binning". "Binning" aims to be discoverable, minimize interference with the user's workflow, minimize its screen real estate footprint, present a minimal UX with powerful interactions, and support a large quantity of actions in a relatively small space.

    Note that this document is a hurried draft and I make no warranties.

    Abstract

    @PatrickMichaelsenBot: The article appears to be a draft discussing various ideas and proposals related to user rating UX and interface design. It explores the concept of using a grade button and bins for assigning grades to documents, as well as the potential for generalizing this interface to other sentiment and categorization applications. The advantages and disadvantages of this approach are also discussed, along with proposals for a modal interface and a chat bot for providing user support and guidance. Overall, the article delves into different possibilities for improving the user experience of rating and interacting with content.

    Introduction

    I was making design considerations for a UX that allows users to evaluate posts in a feed.

    For this case study, we will consider an application for rating documents on a letter grade scale from F- to A.

    Design Spec 1

    This is a specification describing the interface as though it already exists.

    There is a grade button in the lower right hand corner. The user can tap once to grade an A. The grade button is large enough to tap on mobile and has dimensions of around 50 x 50px. The user can also drag and drop the button. When the user begins dragging, a full screen overlay appears.

    The overlay presents bins labeled F through A. This will yield 5 bins. We can consider the possiblity of also supporting +/- grades later.

    Bins are approximately the same relative size as the grade button.

    To assign the desired grade, the user drags the grade button to the appropriate bin and drops it into the bin (This is designed to emulate the tactile, real life experience of organizing stacks of papers).

    Bins do not appear until the dragging action is in progress.

    The bins are arranged left to right.

    There are however two rows of bins, in the following fashion:

    The top row of bins, when used, grades and files away the document.

    When a document is marked as filed, it is omitted from the present view.

    A small indicator showing the number of filed documents is displayed between the documents that preceded and succeeded the filed document. The user can tap that indicator to revisit those documents.

    Extension to Design 1

    This interface, if intuitive and low effort to use, can be generalized to other sentiment and categorization applications.

    Each option would have the same left to right bin scheme and include the ability to file by dragging upwards and keep in the current view stack by not dragging upwards.

    One final way of interacting with this system could be a double tap. A double tap is a "super interaction", like rating the document S tier instead A tier.

    As far as generalized use cases go, here are some I have considered:

    • follow/unfollow user
    • block user
    • report user, report post
    • see less/more of this user or community
    • snooze
    • hide posts from this user
    • hide posts from this community/feed/what have you
    • and more bins-3

    Because it's a 5 bin system, one could combine similar usecases: block, unfollow, hide posts, snooze, and see less are all varying degrees of the same user intent.

    Advantages
    • Keeps interactions close to thumb zone
    • One tap for quick action, drag for more powerful options
    • Presents a clean looking, minimal interface
    • Dragging or swiping to express interest or disinterest in content is an acceptable UX idiom, widely practiced, and familiar to users
    • Minimizes use of valuable screen real estate. Screen real estate is only borrowed when UX control is activated by the user
    • Mimics the real world concept of "binning" documents
    • Allows users to complete two actions at once bins-1
    • bins can be leveraged for data analysis, tagging, categorization, filtering, and searching
    • Filed/Unfiled is a strong mental model for organizing data
    • It can be designed to be discoverable
    • It teaches users how to interact with the system
    • It lends itself easily to desktop bins-2
    • Some users prefer swiping over long pressing or reaching beyond the thumb zone
    • It's fun

    Disadvantages

    • Iconagraphy can be ambigous & unclear. Users must learn what icons do through trial and error, external resources, intro.js or joyride.js, word of mouth, support, tooltips, adjacent help text sidebar, documenation, search, or info icon popups, tutorials, or lately, chat bots. bins-10
    • Swiping is a higher effort action than tapping

    There's likely more. However, I would like to highlight the issue regarding iconagraphy because I will later detail potential ways to remediate that issue. A discoverable, intuitive, and learnable icon UX pattern would be groundbreaking to me. Usually it's a tradeoff between power and complexity and value props to ScRe. I aim to maximize power, minimize complexity, maximize value prop, and minimize ScReF.

    Before proceeding, consider reading bins-10 if you haven't already. The following section builds on it.

    Proposal

    To read my thoughts on how to counteract this iconography disadvantage, read on. I will discuss the introduction of a real-world, but not too common user help system.

    Read the proposal here: bins-12

    -

    That concludes this article. My apologies for the meandering format, this was largely stream of conscious.

    Likewise I apoligize if the UX of navigating this article was difficult.

    Like I said. I like building experimental UIs.

    -

    rixfeed dev log

Rixfeed Dev Log

Note from the author: I include links out to other pages that are usually an aside and optional to explore. Should a resource be necessary for your continued understanding of the article, I will let you know. I hope, when you are reading this, that the features that power it still work. As you may well know, I'm currently in the process of building rixfeed, and while I try to design with backwards compatibility in mind, it's difficult maintaining features that you yourself personally forgot about. As of August 21st 2023, it works.

[bins-0]

The Bin System UX Pattern

This post is an interactive exploration of an experimental UX pattern tentatively named "binning". "Binning" aims to be discoverable, minimize interference with the user's workflow, minimize its screen real estate footprint, present a minimal UX with powerful interactions, and support a large quantity of actions in a relatively small space.

Note that this document is a hurried draft and I make no warranties.

Abstract

@PatrickMichaelsenBot: The article appears to be a draft discussing various ideas and proposals related to user rating UX and interface design. It explores the concept of using a grade button and bins for assigning grades to documents, as well as the potential for generalizing this interface to other sentiment and categorization applications. The advantages and disadvantages of this approach are also discussed, along with proposals for a modal interface and a chat bot for providing user support and guidance. Overall, the article delves into different possibilities for improving the user experience of rating and interacting with content.

Introduction

I was making design considerations for a UX that allows users to evaluate posts in a feed.

For this case study, we will consider an application for rating documents on a letter grade scale from F- to A.

Design Spec 1

This is a specification describing the interface as though it already exists.

There is a grade button in the lower right hand corner. The user can tap once to grade an A. The grade button is large enough to tap on mobile and has dimensions of around 50 x 50px. The user can also drag and drop the button. When the user begins dragging, a full screen overlay appears.

The overlay presents bins labeled F through A. This will yield 5 bins. We can consider the possiblity of also supporting +/- grades later.

Bins are approximately the same relative size as the grade button.

To assign the desired grade, the user drags the grade button to the appropriate bin and drops it into the bin (This is designed to emulate the tactile, real life experience of organizing stacks of papers).

Bins do not appear until the dragging action is in progress.

The bins are arranged left to right.

There are however two rows of bins, in the following fashion:

The top row of bins, when used, grades and files away the document.

When a document is marked as filed, it is omitted from the present view.

A small indicator showing the number of filed documents is displayed between the documents that preceded and succeeded the filed document. The user can tap that indicator to revisit those documents.

Extension to Design 1

This interface, if intuitive and low effort to use, can be generalized to other sentiment and categorization applications.

Each option would have the same left to right bin scheme and include the ability to file by dragging upwards and keep in the current view stack by not dragging upwards.

One final way of interacting with this system could be a double tap. A double tap is a "super interaction", like rating the document S tier instead A tier.

As far as generalized use cases go, here are some I have considered:

  • follow/unfollow user
  • block user
  • report user, report post
  • see less/more of this user or community
  • snooze
  • hide posts from this user
  • hide posts from this community/feed/what have you
  • and more bins-3

Because it's a 5 bin system, one could combine similar usecases: block, unfollow, hide posts, snooze, and see less are all varying degrees of the same user intent.

Advantages
  • Keeps interactions close to thumb zone
  • One tap for quick action, drag for more powerful options
  • Presents a clean looking, minimal interface
  • Dragging or swiping to express interest or disinterest in content is an acceptable UX idiom, widely practiced, and familiar to users
  • Minimizes use of valuable screen real estate. Screen real estate is only borrowed when UX control is activated by the user
  • Mimics the real world concept of "binning" documents
  • Allows users to complete two actions at once bins-1
  • bins can be leveraged for data analysis, tagging, categorization, filtering, and searching
  • Filed/Unfiled is a strong mental model for organizing data
  • It can be designed to be discoverable
  • It teaches users how to interact with the system
  • It lends itself easily to desktop bins-2
  • Some users prefer swiping over long pressing or reaching beyond the thumb zone
  • It's fun

Disadvantages

  • Iconagraphy can be ambigous & unclear. Users must learn what icons do through trial and error, external resources, intro.js or joyride.js, word of mouth, support, tooltips, adjacent help text sidebar, documenation, search, or info icon popups, tutorials, or lately, chat bots. bins-10
  • Swiping is a higher effort action than tapping

There's likely more. However, I would like to highlight the issue regarding iconagraphy because I will later detail potential ways to remediate that issue. A discoverable, intuitive, and learnable icon UX pattern would be groundbreaking to me. Usually it's a tradeoff between power and complexity and value props to ScRe. I aim to maximize power, minimize complexity, maximize value prop, and minimize ScReF.

Before proceeding, consider reading bins-10 if you haven't already. The following section builds on it.

Proposal

To read my thoughts on how to counteract this iconography disadvantage, read on. I will discuss the introduction of a real-world, but not too common user help system.

Read the proposal here: bins-12

-

That concludes this article. My apologies for the meandering format, this was largely stream of conscious.

Likewise I apoligize if the UX of navigating this article was difficult.

Like I said. I like building experimental UIs.

-

rixfeed dev log