The Elements of UI Engineering
overreacted.io
The Elements of UI Engineering
1–10 of 84 posts
Re: The Elements of UI Engineering
#2I've been building consumer apps professionally since 2013 on iOS, Android, Windows Phone and the web. I also spent a few years designing and implementing UI frameworks. I've had to deal with all of the problems listed in Dan's article (with and without frameworks).
Over the years, I have grown convinced that designing and implementing UI by hand simply doesn't scale. There are too many things to consider, too many different users, too many preferences, too many possible states. Responsive design isn't just about screen sizes anymore, it's also about the user's language, culture, disabilities, input, context, preferences, connectivity, knowledge, focus, etc.
We can't expect every restaurant, bank, festival and airlines to implement their own apps, and consider all of the above. You won't find a dark theme in the Domino's app. Why do we tolerate these compromises in the name of branding? Why should UIs be tightly coupled with the services and data? Why don't we have general purpose clients?
I think the job of service providers should be to semantically annotate their data, so that a general purpose client can dynamically render it. All of these UI concerns would only have to be dealt with once, and we all would be able to sleep at night. Just let business people do business, and let UI/UX people do design.
Re: The Elements of UI Engineering
#3From the part on accessibility:
> But we also need to make it easy for product developers to do the right thing. What can we do to make accessibility a default rather than an afterthought?
Yes! We accessibility advocates have been wishing for this for decades. In the context of web development, application developers should rarely, if ever, have to reach for the ARIA role attribute, because they should be able to re-use existing rich widgets rather than implementing custom ones. I'm hoping that Web Components-based toolkits like the new Ionic 4 will help here. Then project boilerplates should include some kind of accessibility testing by default, so developers will have to go out of their way to ignore it.
Re: The Elements of UI Engineering
#4Navigation
Whenever we can't fit everything on the screen at once, we use some of the patterns below:
- scroll view
- virtualized list
- tabs
- drawer
- master-detail
- page navigation
- modal navigation
- alert
- tooltip
- combo box
- collapsible
- carousel
- gallery
It wouldn't make sense to use any of these patterns if we had ∞ sized displays.
Would you call all of the above patterns "navigation"? Why not? Isn't navigation just a way to reach content that isn't immediately accessible? Why don't you think of scrolling through a list as some sort of navigation? I think you should.
It really helps to re-frame all of the above patterns as simple layout strategies. Layouting is about putting content where it belongs. Whether that content is visible or not (covered, collapsed, out of bounds) doesn't really matter.
Let's consider the classic master-detail example that so many people struggle with:
Tablet (stacked on X axis)
+-----+---------+
| | |
| M | D |
| | |
+-----+---------+
--------X--------
Phone (stacked on Z axis)
+-----+
+-----+ | /
| | M | /
| D | | Z
| |----+ /
+-----+ /
Re: The Elements of UI Engineering
#5I've been building consumer apps professionally since 2013 on iOS, Android, Windows Phone and the web. I also spent a few years designing and implementing UI frameworks. I've had to deal with all of the problems listed in Dan's article (with and without frameworks). Over the years, I have grown convinced that designing and implementing UI by hand simply doesn't scale. There are too many things to consider, too many d…
Vanity is the reason, in my experience.
For all the downsides of amp, it’s demonstrated that letting go of asthetic vanity in the name of fundamental soundness is a good trade to make.
Re: The Elements of UI Engineering
#6Much thanks to Dan for taking the time to write this up. UI dev is a deep and highly technical field, but we’re often inundated with juniorish programmers because it’s often the entry point for folks coming out of school or boot camps. We need folks writing more about these kinds of principles and less about a new way to reinvent the wheel
Re: The Elements of UI Engineering
#7I've been building consumer apps professionally since 2013 on iOS, Android, Windows Phone and the web. I also spent a few years designing and implementing UI frameworks. I've had to deal with all of the problems listed in Dan's article (with and without frameworks). Over the years, I have grown convinced that designing and implementing UI by hand simply doesn't scale. There are too many things to consider, too many d…
I've always thought AI would be a good solution for this. The ideal way to create a website is to just express what you see in your mind through drawings, essentially, with a simple way to represent transitions. Doing this in real time with a compiler like in Dreamweaver is awkward because there are too many nonsensical constraints (and other problems that real UI engineers can tell you, I'm just an AI guy).
So to bridge the gap you really need a function that can translate your expression into reality by understanding what parts are important for your design to work and what isn't, and making it work on any platform/client/medium. The type of function that can approximate a potentially extremely complex reality, that can be trained incrementally given examples (bugs)... Sounds a lot like modern machine learning to me.
Re: The Elements of UI Engineering
#8I've been building consumer apps professionally since 2013 on iOS, Android, Windows Phone and the web. I also spent a few years designing and implementing UI frameworks. I've had to deal with all of the problems listed in Dan's article (with and without frameworks). Over the years, I have grown convinced that designing and implementing UI by hand simply doesn't scale. There are too many things to consider, too many d…
A related issue is that the means of making web UIs are too low-level. There's no standard ready-made widget kit like on desktops.
HTML and CSS started as a solution for publishing text-based content, like the olde magazines but on the web. For that they are splendid: text rendering and basic input handling are taken care of, and wide variety of output devices were supported since day one (HTML 2.0 without tables works excellent on phones).
Then web 2.0 and web apps happened, web idioms began to change, all of people's activity with computers started moving to the web. And it turned out that to create complex UIs for all of that you have to fiddle with rather low-level primitives and handle interactions between them, because outside of text layout HTML primarily knows about divs and a handful of input widgets.
This may be good because high-level widgets will be developed independently and will evolve faster (and maybe better) than if they were built into browsers. But in the meantime we have to live with the chaos that we have.
Re: The Elements of UI Engineering
#9I've been building consumer apps professionally since 2013 on iOS, Android, Windows Phone and the web. I also spent a few years designing and implementing UI frameworks. I've had to deal with all of the problems listed in Dan's article (with and without frameworks). Over the years, I have grown convinced that designing and implementing UI by hand simply doesn't scale. There are too many things to consider, too many d…
One UI to rule them all?
This would be a really interesting tool for web developers.
Thankfully, modern UI development is blessed with some really professional UI toolkits: elements UI for vue or Semantic React for instance do a great job of making us think in terms of generic interactions instead of reinventing the wheel.
This means we get to focus on improving the existing as the project warrants which is significantly more rewarding.
Re: The Elements of UI Engineering
#10Wow, this page made my top icon tray in Android turn pink. What is the CSS property responsible for this? (My guess would be: background-color)