4 ms·

> Design a mockup first in something like Figma or InVision and only start coding when the design is ready. I do this the opposite way. Just get the data crude

> Design a mockup first in something like Figma or InVision and only start coding when the design is ready. I do this the opposite way. Just get the data crudely on the page and figure out the information architecture first. Then figure out how to make it attractive. Often during implementation I realize "oh, this data doesn't work quite the way I expected it to" and the IA changes.

lupire 4y ago
Parent was talking about coding the UI ("CSS"), not the data.
code_biologist 4y ago
Yeah, being handwavy about IA is absolutely a common sin of weak designs. I love getting a design that's technically sound, not just pretty. Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying.
- seanwilson 4y ago
  > Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying. This is where you should design wireframes first (e.g. rough greyscale sketches), turn them into clickable prototypes (Figma and InVision let you link up wireframes this way), and get feedback on these from user testing and the developers before creating high-definition designs or doing any coding.
- adrianmsmith 4y ago
  A classic example of this imho is the "create filter" dialog in Gmail. Used to look like this https://images.ctfassets.net/lzny33ho1g45/3Bjwe3vYdJTAr9L6oViNoe/01871127d4fe7882f88929b6dd9709de/Create_Gmail_filter?w=1400 https://images.ctfassets.net/lzny33ho1g45/3Bjwe3vYdJTAr9L6oV... i.e. had a bunch of options for what should happen when an email matched the rule, and also a "also apply this rule to existing email" checkbox. Now it looks like this https://bleakton.com/wp-content/uploads/2018/09/Create-rules-to-filter-emails.png https://bleakton.com/wp-content/uploads/2018/09/Create-rules... . Some designer obviously thought, there are lots of checkboxes for what should happen when an email matches the rule and the "also apply this rule for existing email" is also a checkbox so just put them all in one row, despite it having a completely different meaning.
  - asddubs 4y ago
    maybe the thing to do would have been to just have two different buttons instead
wwweston 4y ago
Is IA even a discipline anymore? I haven’t heard people speak in those terms for almost a decade, and it’s probably been longer since I heard it frequently. If it is still a discipline, what does one read to pick it up?
- jbothma 4y ago
  It very much is. A UX consultant we used introduced me to the term and it was incredibly helpful. This training series from webflow touches on it, but perhaps not as much detail as you'd like https://university.webflow.com/lesson/freelancer-220-developing-a-content-strategy-user-stories-information-architecture https://university.webflow.com/lesson/freelancer-220-develop...
  - ValentineC 4y ago
    I've just watched the linked video. It was pretty good; thanks for sharing. My first impression is that Information Architecture feels like it blurs the line between UX and marketing, and a company with a non-tech/design marketing person could do well to involve them in IA work.
    - seanwilson 4y ago
      It feels like there's a lot of overlap with https://en.wikipedia.org/wiki/Information_architecture https://en.wikipedia.org/wiki/Information_architecture for UI with what's a core activity when doing software architecture e.g. finding the right abstractions, schemas, object hierarchies, groupings and naming conventions that are going to be intuitive to other user/developers.
      - jbothma 4y ago
        Indeed. I think it's important to bear in mind that it's ok for the abstractions to differ, and for the view to translate between the abstractions inside the system and the abstractions or concepts presented to the user. But it's certainly the same exercise. If we see coding as an exercise in describing the system in a way the computer can execute but most importantly, other developers can understand and maintain, developers are simply another persona, and a card sort between developers would elicit the abstractions and names we should strongly consider using for things in the code. Same methods as information architecture for users.
alfiedotwtf 4y ago
Maybe it's just me, but I thought Information Architecture is design!
- jbothma 4y ago
  Design has gotten blurry - is UX part of design? I kinda see these parts as part of (non-dev-technical) design and designers differ in the degree to which they own these - visual design towards a design system - abstract system of "this kind of thing looks like this so that the user can see it's this kind of thing and it looks good" - information architecture - actual things we have on the site or page or app or system, and how we organise them so that they make sense and match the user mental model - ux design - the use of the above two to sure it both looks good, and people find stuff, and are able to use stuff - copywriting - hopefully happens somewhere in there
jxm262 4y ago
Sorry im new to design and not familiar with the acronyms. What does IA mean in this context?
- jxm262 4y ago
  Apologies, just scrolled down and read some other comments. Means Information Architecture

lupire 4y ago

Parent was talking about coding the UI ("CSS"), not the data.

code_biologist 4y ago

Yeah, being handwavy about IA is absolutely a common sin of weak designs. I love getting a design that's technically sound, not just pretty. Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying.

seanwilson 4y ago
> Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying. This is where you should design wireframes first (e.g. rough greyscale sketches), turn them into clickable prototypes (Figma and InVision let you link up wireframes this way), and get feedback on these from user testing and the developers before creating high-definition designs or doing any coding.
adrianmsmith 4y ago
A classic example of this imho is the "create filter" dialog in Gmail. Used to look like this https://images.ctfassets.net/lzny33ho1g45/3Bjwe3vYdJTAr9L6oViNoe/01871127d4fe7882f88929b6dd9709de/Create_Gmail_filter?w=1400 https://images.ctfassets.net/lzny33ho1g45/3Bjwe3vYdJTAr9L6oV... i.e. had a bunch of options for what should happen when an email matched the rule, and also a "also apply this rule to existing email" checkbox. Now it looks like this https://bleakton.com/wp-content/uploads/2018/09/Create-rules-to-filter-emails.png https://bleakton.com/wp-content/uploads/2018/09/Create-rules... . Some designer obviously thought, there are lots of checkboxes for what should happen when an email matches the rule and the "also apply this rule for existing email" is also a checkbox so just put them all in one row, despite it having a completely different meaning.
- asddubs 4y ago
  maybe the thing to do would have been to just have two different buttons instead

wwweston 4y ago

Is IA even a discipline anymore? I haven’t heard people speak in those terms for almost a decade, and it’s probably been longer since I heard it frequently. If it is still a discipline, what does one read to pick it up?

jbothma 4y ago
It very much is. A UX consultant we used introduced me to the term and it was incredibly helpful. This training series from webflow touches on it, but perhaps not as much detail as you'd like https://university.webflow.com/lesson/freelancer-220-developing-a-content-strategy-user-stories-information-architecture https://university.webflow.com/lesson/freelancer-220-develop...
- ValentineC 4y ago
  I've just watched the linked video. It was pretty good; thanks for sharing. My first impression is that Information Architecture feels like it blurs the line between UX and marketing, and a company with a non-tech/design marketing person could do well to involve them in IA work.
  - seanwilson 4y ago
    It feels like there's a lot of overlap with https://en.wikipedia.org/wiki/Information_architecture https://en.wikipedia.org/wiki/Information_architecture for UI with what's a core activity when doing software architecture e.g. finding the right abstractions, schemas, object hierarchies, groupings and naming conventions that are going to be intuitive to other user/developers.
    - jbothma 4y ago
      Indeed. I think it's important to bear in mind that it's ok for the abstractions to differ, and for the view to translate between the abstractions inside the system and the abstractions or concepts presented to the user. But it's certainly the same exercise. If we see coding as an exercise in describing the system in a way the computer can execute but most importantly, other developers can understand and maintain, developers are simply another persona, and a card sort between developers would elicit the abstractions and names we should strongly consider using for things in the code. Same methods as information architecture for users.

alfiedotwtf 4y ago

Maybe it's just me, but I thought Information Architecture is design!

jbothma 4y ago
Design has gotten blurry - is UX part of design? I kinda see these parts as part of (non-dev-technical) design and designers differ in the degree to which they own these - visual design towards a design system - abstract system of "this kind of thing looks like this so that the user can see it's this kind of thing and it looks good" - information architecture - actual things we have on the site or page or app or system, and how we organise them so that they make sense and match the user mental model - ux design - the use of the above two to sure it both looks good, and people find stuff, and are able to use stuff - copywriting - hopefully happens somewhere in there

jxm262 4y ago

Sorry im new to design and not familiar with the acronyms. What does IA mean in this context?

jxm262 4y ago
Apologies, just scrolled down and read some other comments. Means Information Architecture