Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
About Snippet
Categories
0
Comment
In finding the best term for separating a collection of items, which to use—list or group?
Brain dump:
List implies linearity, structure.
Group implies randomness.
—
In generalizing the semantics of all items in a collection—in an HTML document—go for group.
<ul class="list group">…</ul> <div class="group">…</div> <dl class="list group">…</dl>
—
It is important to note that the all HTML elements in the examples could express hierarchy by nesting other elements—but it is in the collection of items that list or group provides semantics.
To recap:
Use list for collection of items that implies order (yes, even for <ul>).
Use group for collection of items that does not imply order.
Categories
Information Architecture & Interaction Design
- Human–Computer Interaction
- Cognitive Psychology
- Ubiquitous Computing
- Urban Informatics
- Urban Computing
- Human Factors and Ergonomics
- Social Computing
- User Experience and Experience Design
- Visual Representation
- Industrial Design
- Bifocal Display
- Contextual Design
- Mobile Computing
- End–User Development
- Philosophy of Interaction
- Affective Computing
- Requirements Engineering
- Context–Aware Computing
- Usability Evaluation
- Activity Theory
- Disruptive Innovation
- Open User Innovation
- Visual Aesthetics
- Tactile Interaction
- Somaesthetics
- Card Sorting
- Wearable Computing
- Social–Technical System Design
- Semiotics
- Aesthetic Computing
- Computer Supported Cooperative Work
- Phenomenology
- Formal Methods
- Personas
- Ethnography
- 3D User Interfaces
- Action Research
- Experimental Methods in Human–Computer Interaction
- Data Visualization for Human Perception
- Human–Robot Interaction
- User Interface Design Adaptation
- Emotion and Website Design
- Human–Data Interaction
- Design for All
- Research through Design
- Affordances
- Semi–Structured Qualitative Studies
References
Categories
But I know every rock and tree and creature
Has a life, has a spirit, has a name
Colors of the Wind
In terms of User Interface Design, every element must serve its purpose—its reason for being. In able to be identified, it must have a name and a description of what it does.
The Name—Description—Purpose Information Structure or NDP becomes a tool in identifying any UI element within a system. The Designer would have a glimpse of what it is called (Name), what it does (Description), and why it exists (Purpose).
Categories
Be a jack of all trades and a master of none or a master of one (and more)? It is an age-old question.
It depends on the environment where you want to focus on:
- in a one-man band freelancing: jack of all trades
- in a company with team members with specializations: specialize
- in a company with “all-around” team members: jack of all trades
In general, be the best at one thing and not so best or at least familiar with other things.
Categories
There are many default usability styles designed by the browser.
Sometimes it is best to leave it alone because it covers a lot of area that you might not be able to cover if you nitpick it.
Now if the color of the outline clashes with your branding like “blue is really banned from your UI” then change it.
Or if the outline color is the same as the background color, it won’t be seen, of course, so change it.
It’s important to note that styles whose main purpose is usability must be left alone especially if your purpose is to simply comply with color schemes.
Categories
There are initial points to take into consideration in order to make sense of the connection between HTML elements (<p>, <a>, <div>, etc.) and CSS properties (display, font-size, background-color, etc.).
- The nature of the HTML element
- The purpose of the HTML element
You might notice that it is all about HTML elements. This is because HTML elements already have implicit CSS rules in them thru the browser. It is called the User Agent Styles or browser default styles.
Now your question borders around creating your own styles, thus, overriding the default styles.