Category: UX Design
-
Wireframes Plus Flowcharts Equals
Wireflows. First time today that I’ve read about this fairly novel artifact. What I’ve been using (and sharing with my team) is called an Interaction Diagram—which, basically, is a Task Flow Diagram plus Wireframes. Reading that article from Nielsen Norman Group, I’ve found out that there could be a high–fidelity wireflow—which in the example given,…
-
Reading The Polar Bear Book
I’m taking a refresher on Information Architecture by reading Information Architecture: For the Web and Beyond by Louis Rosenfeld, Peter Morville, and Jorge Arango. Information Architecture is as important as planning and strategizing in general—it’s one of the first steps when designing for many kinds of information systems and digital products.
-
The Agile Manifesto and Principles
Yesterday, our team attended a lecture in Agile and Scrum. I realized that some of its principles are familiar based on our practices as designers. Agile Manifesto We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value: Individuals and interactions over…
-
Are UI and UX design the same for websites, apps, and physical flyers?
If it stemmed from the same campaign, they all could have the same objectives. Only at the Structure level—specifically, Information Architecture—they could be the same. For the interface (UI), the differences are obvious—that as of this moment, physical flyers can’t handle HTML yet. Originally published in Quora
-
Are You Game?
Recently, the team is delving into gamification—ultimately, towards user engagement. Glad to have encountered the ARCS model of instructional design which is similar to the engagement loop. ARCS stands for: Attention, Relevance, Confidence, Satisfaction—which could also be an engagement loop in learning.
-
Framed Up
I still could not wrap my head around the whole idea of frames. However, I did like the structure that was described in relation to linguistics. Surface Syntactic Frames – verb and noun structures Surface Semantic Frames – action–centered meaning of words Thematic Frames – settings Narrative Frames – stories We could notice the structure—from…
-
Using as Placeholder Attribute
How about applying the DRY Principle in a user interface? One method is by using a single element to have multiple functions. In the case of a <label> and a placeholder attribute in a <form>, we could simply use the <label> to be the only label of a particular field—as opposed to having two. Besides,…
-
Learnings and Reminders
The minimum size of an Active Area (AA) Ideally, it is 48 x 48 pixels. However, there are elements that needs to be smaller in relation to other elements with it—with this consideration, we could go down until 32 x 32 pixels. The cohesion between two UI elements In order to show cohesion and relation…
-
Defining Elements in a User Interface
There could be two approaches in defining elements in a User Interface (UI): Sentence Label Say, for example, we have a blog post that has a date. In order to define what kind of date it is, we could either define it in a sentence: Published on 1 January 2020. This blog post was published…
-
When should I use a single-column and multi-column timeline feed?
What kind of content are you presenting? Take a look at Facebook feed and Pinterest feed. Facebook feed presents a variety of content—text, images, videos whose purpose are to update the users of current events and happenings in their friends’ lives. Pinterest feed, on the other hand, presents content heavy on images—eye candy if you…