Jan 13, 2019 10:29:41

The UX of coding is broken

by @jasonleow | 657 words | 110πŸ”₯ | 110πŸ’Œ

Jason Leow

Current day streak: 110πŸ”₯
Total posts: 110πŸ’Œ
Total words: 47367 (189 pages πŸ“„)

The user experience of coding is broken. As a designer trying to learn coding, I'm surprised by how the UX of the coding activity itself is not built to set us up for success. 


In design, we have this thing called bodystorming. Basically, if you have an idea for a new product/service or improvements to an existing one, rather than talk in the abstract about it and imagine how it would be like, you get up, get out and try it out with your own body. 


Bodystorming is the act of physically experiencing a situation in order to immerse oneself fully in the users’ environment, in order to develop empathetic understanding of the painpoints and high points that users face.  


It's a technique that's similar to what consumer/marketing research calls mystery shopping. As a designer myself, it had become second nature to constantly observe and evaluate how I can design better experiences while experiencing the thing itself. Call it an occupational hazard. 


So that's what I found myself doing while learning how to do computer programming the past week (mainly front-end web development using HTML, CSS and JS). I was bodystorming the activity we call coding. And boy, does the user experience of coding feel broken. As someone new to it, there's things we do in coding that just bewildering to me. One thing is the way we code and check our work.


I don't particularly enjoy the workflow of writing code on the text editor and refreshing the browser page to see if the page turned out as you wanted it. What happens is very often you go back and forth between 2 or more screens - the text editor and the browser - tweaking tiny changes until everything lines up the way you want it.


It's like we're trying to paint a Picasso, but writing down extremely detailed and specific text instructions to micro-manage someone else to paint it for us, down to the angle of how they hold the brush, how many strokes of a specific colour to dab on, at which specific millimetre square of the canvas. Just that in the case of coding, the painting is the website, that someone else is the computer, and text instruction the code. It's the wrong way round! If I need to do spatial layouts on a web page, I do it right there on the browser, by drawing the shapes or placing the elements where I want them, spatially. Not type text! Typing text to do that is a counterintuitive to a human user and sets up an additional layer of complexity and difficulty to achieving what you want. Visual and spatial work should have visual and spatial tools, not text. It was frustrating having to learn coding using such tools, when as a designer I'm used to using tools like Sketch and Photoshop. 


The tools we have now for coding are mostly computer-centric, not human-centred. What I need is to code a website, visually


I later learned that there are tools like Pinegrow and Webflow that allows you to do just that - drag-and-drop a website together visually, while the auto-generating clean and semantic code for you to be exported. Thank god! But that made me even more confused:


     - If such tools are available, why are we still learning/doing (front-end) development the old way?! 

     - Why aren't these tools more popular and commonly used? 

     - In fact, if we can do it this way, what's the value of learning the syntax then?

 

Caveat though: I'm only at front-end web development (HTML, CSS, JS) so far. I can't speak for the experience of doing back-end development, whether it's broken too, etc. More learnings to come! 


Next: Writing syntax is like failing a writing exam because you forgot to add a period after a sentence 

From Jason Leow's collection:

  • 1

    @jasonleow I think this also feed into a persons process. Why do some people enjoy Manual Vs Auto driving? =P

    I definitely prefer Squarespace or Wix for Drag & Drop websites, but I remember hard coding sites in the past, and having a ton of fun customizing every little thing.

    I think my personal sweet spot is be able to visualize everything when creating the big idea, but also having the ability to dive under the hood and fine tune it to get it justttt right =P

    Lex Tan avatar Lex Tan | Jan 13, 2019 06:14:10
    • 1

      @lexc yes that's my sweet spot too, and it's already available! Pinegrow and Webflow does just that - allowing for drag and drop development while not sacrificing the flexibility to look under the hood to fine tune code it. I'm just surprised why these tools aren't more popular. Squarespace/Wix though serves a different purpose and niche, for folks who don't even want to look under the hood, and that's not really what I'm after here.

      Jason Leow avatar Jason Leow | Jan 13, 2019 14:15:50
    • 1

      @jasonleow that’s fair πŸ˜‹ I’ll have to look at those! Thanks for the reccos. squarespace does actually allow an export of the code, but you are right, they’ll get fussy and refuse to update if I do πŸ˜‚

      Lex Tan avatar Lex Tan | Jan 14, 2019 02:29:27
  • 1

    @jasonleow Front-end and Backend Developer here. I love how you eloquently explain the process of testing your code to see if it's work as expected.

    Those tools you mention that do drag and drop mostly use for creating simple web pages ( think of home page, about us, contact us with the viewing of information). You could do as well a complete ecommerce with it if that tools you mentions provide it.

    But if you want to develop a more complicated website (also known as web apps ) those hardcoded HTML and CSS + javascript will be useful 'cause it will give you more control over the things that you wanted to do.

    What usually front-end developer do is they are designing their website first using sketch or figma or photoshops and then eventually convert it later into code.

    Lastly, you will enjoy coding and programming in general if you do trial and error plus when your code works as expected.

    Christopher Deuda avatar Christopher Deuda | Jan 13, 2019 04:05:47
    • 1

      @christopherdeuda yeah, agree that the drag and drop tools are not there yet in terms of being able to do more complex interactions. I'd love to see them develop in sophistication in the future so that even complex web apps can be done, because the painpoint (of using text-based tools for visual-spatial work) remains.

      Jason Leow avatar Jason Leow | Jan 13, 2019 11:13:18
contact: email - twitter - facebook