5 ms·

It's an affordance - it signals immediately to the reader that the block of text is source code https://en.wikipedia.org/wiki/Affordance https://en.wikipedia.o

It's an affordance - it signals immediately to the reader that the block of text is source code https://en.wikipedia.org/wiki/Affordance https://en.wikipedia.org/wiki/Affordance Best example of affordance is handles on doors: horizontal spanning the whole door for push to open and vertical for pull to open.

ken 6y ago
No, it's the opposite. > "In 1988, Donald Norman appropriated the term affordances in the context of human–machine interaction to refer to just those action possibilities that are readily perceivable by an actor." Putting a door handle on a door is an affordance: you can see how to open the door (action). Putting window controls on something that's not a window and can't be controlled as such is not an affordance: it's misleading. There's no action to be perceived here.
- throwlaplace 6y ago
  ... these code screen caps are inserted into presentations not demos?? As far as I know no audience member expects to walk up to the projector screen and minimize a window. The point is to prime someone's perception for how they should interpret something. Good try being completely literal though. edit: i can't believe i have to explain this. the window serves exactly the same purpose as offsetting code blocks in text in a different font, in a different color, with a different background: it's to indicate that there's something meta-semantically distinct about this block of text from other blocks of text. to contextualize the code even moreso accomplishes the same goal - implicitly communicating distinction.
  - detaro 6y ago
    "Indicating something is distinct about this block of text" is helpful design, but not really an affordance. Affordances are about actions.
  - matheusmoreira 6y ago
    > The point is to prime someone's perception for how they should interpret something. And what perception is that? The macOS semaphore controls make the square look like a macOS window. Not all windows are text editors: people still have to look at the content of the window in order to understand it. Not all text editing is source code editing: people still have to read the text in order to realize it's source code. The Carbon twitter contains images of error logs and ASCII art. Monospaced typefaces and syntax highlighting of the text are the design features that truly denote source code. A container with contrasting background color distinguishes the source code from the other elements on the page or slide. > the window serves exactly the same purpose as offsetting code blocks in text in a different font, in a different color, with a different background: it's to indicate that there's something meta-semantically distinct about this block of text from other blocks of text. They don't have the same purpose. The information conveyed by all of those elements are completely different. Monospaced, syntax highlighted text looks like source code to any programmer. Placing that text inside a container allows it to be quickly distinguished from the surrounding prose. Adding macOS controls to this design makes it look like source code that's being edited in macOS. Why convey those additional bits of information? Does the code not work outside of macOS? Are users of other systems not part of the target audience? Is the author subtly signaling their use of macOS to other macOS users in the audience?
peferron 6y ago
You might be off in your understanding of what an affordance is (or I might). A protruding door handle affords to close your hand around it and pull, while a plate or bar cannot easily be pulled and affords pushing only. The horizontality or verticality are more motivated by ergonomics and safety codes. Regarding Carbon, it's obvious to readers that the image is just that—an image—and that the buttons cannot be interacted in any way and don't afford the reader to perform any action. At best, it suggests that the content initially lived within an OS window, with some buttons that afforded some interaction. But so does your browser and music player and every other app that have nothing to do with editing source code. The monospaced font, syntax highlighting, and context are more than enough anyway. IMO it has nothing to do with affording anything and the goal is just to look fancy (which is fine since that's explicitly the goal). Try to picture for a second the same screenshots but with Microsoft Windows-style buttons and it's obvious that nobody would use it since it would look low-rent and clash with the "crafted with <heart_emoji> in San Francisco" footer.
- throwlaplace 6y ago
  >A protruding door handle affords to close your hand around it and pull you could easily have a bar across the width of the door that's narrow and protrudes and affords the ability to clasp it. no the real intent is to communicate to you that amount/direction of force that you need to apply; a bar across the width communicates push hard because the door opens away from you while a handle at the edge communicates pull moderately because you have lots of leverage and the door opens towards you (because if it were at the center you would open the door onto yourself). >But so does your browser and music player and every other app that have nothing to do with editing source code it is obviously emulating vscode/monaco editor that the maintainer assumes most people are familiar with. like there's literally a vscode extension that produces almost the same exact images https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap https://marketplace.visualstudio.com/items?itemName=adpyke.c...
  - peferron 6y ago
    Looking like VS Code absolutely helps. It's just not an affordance.

ken 6y ago

No, it's the opposite. > "In 1988, Donald Norman appropriated the term affordances in the context of human–machine interaction to refer to just those action possibilities that are readily perceivable by an actor." Putting a door handle on a door is an affordance: you can see how to open the door (action). Putting window controls on something that's not a window and can't be controlled as such is not an affordance: it's misleading. There's no action to be perceived here.

throwlaplace 6y ago
... these code screen caps are inserted into presentations not demos?? As far as I know no audience member expects to walk up to the projector screen and minimize a window. The point is to prime someone's perception for how they should interpret something. Good try being completely literal though. edit: i can't believe i have to explain this. the window serves exactly the same purpose as offsetting code blocks in text in a different font, in a different color, with a different background: it's to indicate that there's something meta-semantically distinct about this block of text from other blocks of text. to contextualize the code even moreso accomplishes the same goal - implicitly communicating distinction.
- detaro 6y ago
  "Indicating something is distinct about this block of text" is helpful design, but not really an affordance. Affordances are about actions.
- matheusmoreira 6y ago
  > The point is to prime someone's perception for how they should interpret something. And what perception is that? The macOS semaphore controls make the square look like a macOS window. Not all windows are text editors: people still have to look at the content of the window in order to understand it. Not all text editing is source code editing: people still have to read the text in order to realize it's source code. The Carbon twitter contains images of error logs and ASCII art. Monospaced typefaces and syntax highlighting of the text are the design features that truly denote source code. A container with contrasting background color distinguishes the source code from the other elements on the page or slide. > the window serves exactly the same purpose as offsetting code blocks in text in a different font, in a different color, with a different background: it's to indicate that there's something meta-semantically distinct about this block of text from other blocks of text. They don't have the same purpose. The information conveyed by all of those elements are completely different. Monospaced, syntax highlighted text looks like source code to any programmer. Placing that text inside a container allows it to be quickly distinguished from the surrounding prose. Adding macOS controls to this design makes it look like source code that's being edited in macOS. Why convey those additional bits of information? Does the code not work outside of macOS? Are users of other systems not part of the target audience? Is the author subtly signaling their use of macOS to other macOS users in the audience?

peferron 6y ago

You might be off in your understanding of what an affordance is (or I might). A protruding door handle affords to close your hand around it and pull, while a plate or bar cannot easily be pulled and affords pushing only. The horizontality or verticality are more motivated by ergonomics and safety codes. Regarding Carbon, it's obvious to readers that the image is just that—an image—and that the buttons cannot be interacted in any way and don't afford the reader to perform any action. At best, it suggests that the content initially lived within an OS window, with some buttons that afforded some interaction. But so does your browser and music player and every other app that have nothing to do with editing source code. The monospaced font, syntax highlighting, and context are more than enough anyway. IMO it has nothing to do with affording anything and the goal is just to look fancy (which is fine since that's explicitly the goal). Try to picture for a second the same screenshots but with Microsoft Windows-style buttons and it's obvious that nobody would use it since it would look low-rent and clash with the "crafted with <heart_emoji> in San Francisco" footer.

throwlaplace 6y ago
>A protruding door handle affords to close your hand around it and pull you could easily have a bar across the width of the door that's narrow and protrudes and affords the ability to clasp it. no the real intent is to communicate to you that amount/direction of force that you need to apply; a bar across the width communicates push hard because the door opens away from you while a handle at the edge communicates pull moderately because you have lots of leverage and the door opens towards you (because if it were at the center you would open the door onto yourself). >But so does your browser and music player and every other app that have nothing to do with editing source code it is obviously emulating vscode/monaco editor that the maintainer assumes most people are familiar with. like there's literally a vscode extension that produces almost the same exact images https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap https://marketplace.visualstudio.com/items?itemName=adpyke.c...
- peferron 6y ago
  Looking like VS Code absolutely helps. It's just not an affordance.