good people gone back

Responsive Android UI design

Learn step by step approach to creating, appealing fluid and responsive UI for Android.

Good offer at the end — read on!

The initial passion

If you are reading this article, chances are that you love building app that run on android, You started with great passion just like we all did, and most time, 80% of us are self thought, which on the highest percentage leaves us with no time to learn the basic secrets that makes up the complex.

Before you started building android apps, chances are also that you have tried other technologies like building for the web using html, css and javascript or desktop Apps using java. That leaves maybe 50% of us to be proud of our business logic, but it’s not always the same when it comes to designing user interface for our apps which is what this article is all about.

Building Android app is an exciting venture; there is this joy that comes with seeing your app run on your own very phone, you can be proud to show your friends and family, but not when it’s looking crappy right?.

Designing for android combines 3 powerful tools, layouts, typography and colors to give our app an appealing look, aside from the functionality of your app the next most important thing is the look and feel.

The Challenge

So let get even more deeper,

To build complex UI layouts, we use this Layouts more often to organise and arrange our ui components according to our design blueprint:

  • Linear-layout
  • Relative-layout
  • Constraint-layout*

We have many other types of layout but, these three are common for most use cases, which might demand nesting of the same type of layout or even combining them, to achieve what we want. For instance in the screenshot below,

Nested Linear-layout example

we have a spinner that a user can choose the number of items they want to purchase to generate a dynamic order items to be inflated in the layout with id “container”. *See code in Gist* We have a spinner and an ImageButton arranged in a horizontal Linearlayout, which we used layout_weight to distribute the space in the horizontal linearlayout in theratio of 0.5/4.5 and 4/4.5 .

This horizontal Linearlayout is a siblings along side a TextViewwith the label of what the Spinner and Button stack on top of each other in a vertical LinearLayout.

This parent Linearlayout is also a child to a cardview wrapped around by another Linearlayoutof vertical orientation, which we used because scrollview take a single child.

You can see the level of nesting tree in the code view below in Github

Gist

You can see the little UI in the screenshot above took 63 lines of xml codewhen pretty formatted, but the key takeaways here is that we can’t achieve that by just using drag and drop; to achieve a design that solves a key user problem, while saving space, you need to understand how this layouts work.

We just talked about using Linearlayouts, we can achieve the same UI using Relativelayout, which reduces the level of nesting, which consumes android computing and processing time to draw each individual view.

Let’s take a look at more fluid example the screenshot below

Building nested UI in Constraint Layout

Was done using Constraint-layout. Constraint layout gives you more fluid and responsive power to effect UI that responds to all screen sizes like bootstrap for web.

Constraintlayout came as part of support library; you can take a look at the key intro from the android doc here

Constraint layout is a brother to Relativelayout, they behave mostly the same way, just that Constraint layout is now more advanced with more fluid features like guideline, barrier etc. To use Constraint layout you really need to understand the secrets to how these layouts works in positioning views to its siblings and parents, just like Relative-layout, but now uses Constraints.

To use ConstraintLayout in your project, proceed as follows

Ensure you have the

maven.google.com repository declared in your module-level build.gradle file:

repositories {

maven {

url ‘https://maven.google.com’

}

}

Add the library as a dependency in the same build.gradle file:

dependencies {

compile ‘com.android.support.constraint:constraint-layout:1.0.2’

}

The screenshot above was achieve in Constraintlayout, by nesting Constraint layout and guidelines.

Using the code below in Github

Gist

The way forward

This Udemy Course “Responsive Android UI design revealing the pro’s secret” which am going to share with you was design to solve all this design hitches from how to achieve such UI using Linear-layout nesting, Relative-layout and Constraint-layout just like the above example, which I am the Instructor @nge_one has agreed to offer to you at half the price [50%] discount with this coupon code UI-XTRA, or follow TAKE_ME_TO_THE_COURSE now as is limited to a number of people

So follow this link to enroll to this course almost free NOW and improve your Android UI app design skills since after functionality is your design. The user careless about million lines of code, rather its what they see.

The link above gives you 50% discount which is half price of a course priced at $30.kindly rate it leave an honest review to encourage and support him if you find it helpful, there is also 30 day money back, But i bet It will help you!

The Most Important Rule in UX Design that Everyone Breaks

In Product Design, and Possibly Life Management

There is one principle of organization that every human should adhere to, particularly people who design products. Day after day, I see companies break this rule, and it is 100% of the time to their detriment. In this article I will explain what that rule is, and what it means to product and service design. I’ll also raise the possible implications of this phenomenon on organizational management, collaboration, and general performance. The psychological phenomenon I will be discussing in this article is known as Miller’s Law. Rather than just tell you what Miller’s Law is, I ask you to take part in this exercise for a more immersive learning lesson.

The Exercise…

Step 1

Read the italicized instructions before starting. Grab a pen and paper. This is an exercise where you will try to recall words you’ve just read, off memory.

Below is a list of 20 words. Read them to comprehension , and try to memorize as many as possible. Try to keep the words ‘in your head’. Do not write the words. Spend about a minute. After you are done reading, scroll down until you see the word ‘STOP’. Then, read step 2.

STOP < ··············································

Step 2

Now, use your pen and paper to write down as many words as you can remember from the list. Think hard, but do not scroll back up to view the words. If you scroll up, the experiment is ruined. Give yourself about half a minute…Once you have finished writing the words you tried to recall, scroll back up and check how many you got right.

If you are like the vast majority of human beings, you will have remembered 5–9 of the words. Hundreds of experiments prove universality of this limitation on memory. When I first discovered this phenomenon, I knew it had huge implications on product design, because of the degree to which this limitation affects day to day tasks. This capacity for keeping ~7 bits of information ‘in the head’ short term, is known as Miller’s Law.

Miller’s Law · The Magic Number

In 1956 there was a paper written that became one of the most highly cited papers in psychology. Titled, The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information, it was published in 1956 by the cognitive psychologist George A. Miller of Princeton University’s Department of Psychology in Psychological Review. The crux of the paper suggests that the number of perceptual ‘chunks’ an average human can hold in working memory (a component of short-term memory) is 7 ± 2. This is frequently referred to as Miller’s law. Here is a summary of the article, sourced from wikipedia:

In his article, Miller discussed a coincidence between the limits of one-dimensional absolute judgment and the limits of short-term memory. In a one-dimensional absolute-judgment task, a person is presented with a number of stimuli that vary on one dimension (e.g., 10 different tones varying only in pitch) and responds to each stimulus with a corresponding response (learned before). Performance is nearly perfect up to five or six different stimuli but declines as the number of different stimuli is increased. The task can be described as one of information transmission: The input consists of one out of n possible stimuli, and the output consists of one out of nresponses. The information contained in the input can be determined by the number of binary decisions that need to be made to arrive at the selected stimulus, and the same holds for the response. Therefore, people’s maximum performance on one-dimensional absolute judgement can be characterized as an information channel capacity with approximately 2 to 3 bitsof information, which corresponds to the ability to distinguish between four and eight alternatives.

Moreover, the human mind can remember ~7 bits of information when completing a task that requires cognitive effort. This is critical, because humans are constantly performing tasks, and trying to juggle various stimuli in the mind when doing so. One of the key concepts behind Miller’s Law is ‘chunking’, which basically means assembling various bits of information into a cohesive gestalt. For example, the word · p e n c i l · is actually a ‘chunk’ of letters, organized into a perceptual gestalt. If the letters were rearranged · c n l i p e · it would be six separate chunks of information. Chunking is a critical element of information organization, and is the basis for our UX and organizational rule.

The Rule

Always organize elements of information in categories no larger than 9, but preferably ~5 chunks.

The more chunks of information you add to an ‘interface’, the more difficult it becomes to ‘work’, using the information at hand. This is especially critical for first time users, because they haven’t had the ‘practice’ needed to encode the interface into long term memory, or, for the behaviour to become habitual. I constantly see this rule being broken by giants like Facebook, Google, and WordPress. Don’t even get me started on automobile interface design. The ~5 bit chunk rule also compliments minimalism as a rigorous design philosophy. To expound, due to the limitations of working memory, as a product becomes more feature-full it inevitably becomes more difficult to use, because the user has to manage more information while operating the product. This makes good information design so critical.

Millers Law also highlights the importance of foresight and proper planning in the design process, because as you add more features to a product — your interface must be able to accommodate those new features without breaking the visual foundation of what you built. Rebuilding a foundation takes immense time and resources.

Another perceptual phenomenon observed in relation to Miller’s Law is known as the primacy, and recency effect. These terms are used respectively to describe how we remember items sensed at the beginning and end of an experience, more than ones in the middle. For example, if I were to show you a list of words, you would more likely remember the words at the beginning of the list, and the end. This is also known as the serial position effect. From wikipedia:

Serial position effect is the tendency of a person to recall the first and last items in a series best, and the middle items worst.[1] The term was coined by Hermann Ebbinghaus through studies he performed on himself, and refers to the finding that recall accuracy varies as a function of an item’s position within a study list.[2] When asked to recall a list of items in any order (free recall), people tend to begin recall with the end of the list, recalling those items best (the recency effect). Among earlier list items, the first few items are recalled more frequently than the middle items (the primacy effect).[3][4]

This observation raises huge questions in business and design. If people remember more at the beginning and end of an experience, how do we enhance the positives, and mitigate the negatives at these respective times? When does an experience truly begin and end? Should we be organizing more important elements at the beginning and end of lists due to their increased retention? These are all valid questions that UX designers and executives should ask when inventing or developing their product.

Millers Law can be applied to any aspect of your life that involves performing a mildly complex task. By reducing the amount of elements in your reach/access — and keeping them organized by relevant chunks not exceeding 9 bits, your brain will be able to remember exactly where things are so you can access its functionality. When lists of items grow too large, they become very difficult to mentally map them, requiring the user to do more cumbersome searching.

The adherence to Miller’s Law is especially relevant in the light of lean methodologies and recent trends in tech and UX. Users want and need a trial before they purchase something — it’s that simple. If they don’t experience the value within the first day or week of using it — they won’t buy. Since new users do not have lengthly time to learn where everything is — information design needs to be planned and well thought out before development happens.

Millers Law Beyond Information

We live in a world with an exponentially increasing amount of information. By not organizing it properly, or eliminating some completely, it ultimately degrades our ability to complete critical tasks for the purposes of survival (navigation/gaining income). That is why it’s so useful to omit items, products, and services from your life that aren’t giving a quality return on investment. This falls in line with the Pareto principle, the idea that 80% of your outcomes comes from 20% of your investments. Are you juggling too many tasks per day to be efficient? Is your team using too many tools to collaborate? Do you have too many members on your team? Are you overloading your new employees with information, leading to confusion?

Millers law teaches us that humans have a finite amount of information they can process, and that information overload will lead to distraction that negatively affects performance. Companies should look for ways to organize information in a way that is much more digestible for their customers and employees. This could be by eliminating tools or applications that are producing cognitive overload, reducing the amount of members on a team, or even organizing your departments based on our knowledge of working memory.

This is especially true in new science of the concept of flow, made famous bypsychologist Mihaly Csikszentmihalyi. Flow is a word Mihaly coined to describe a state of concentration or ‘absorption’ with a specific task that humans ultimately find rewarding, pleasurable, and fulfilling. He describes it as an optimal state where we perform at our best and truly live ‘in the moment’. One sure way to kill flow is by increasing distractions in the workplace. So, do you think that by giving your employees more tools, that it actually enhances performance? Miller’s Law teaches us time and time again this is not the case. When it comes to completing tasks, less is more.

Actionable Insights

Turn off your desktop slack notifications. Get rid of the things you never use. Stop checking your various inboxes. Master one tool, not many. Now start focusing.

Original Article from here

By Jeff Davidson

you can check him out

http://jeffdavidsondesign.com/