As a designer Se often forgot that in 1 User Interface (UI) there are 5 state that we need to design. Most of designer just show the success states in the UI. In this presentation I also explain tips before creating UI. I hope after you reading this presentation, people can make better UI in any state , any case and scenarios.

1. The Common UI
The one that Designer gave to developer. After
create this, We update the project management
and mark as DONE.

2. Are you sure is it done?

3. 5 State of UI
Arnold Saputra | Head UX ramedia
Digital Nusantara

4. BTW,
What I called UI in this
slide are User Interface
Not

6. 1st State: Blank STATE

7. BLANK STATE
It’s about providing your customer an
incredible first impression as you
introduce them to your product — to spur
them to action, keep them interested, and
remind them of the value your product’s

8. BLANK STATE
Introduce them to your app features
or page. Don’t forget to give clear &
prominent CTA for the user.
1. It’s great for New user.

9. BLANK STATE
Introduce them to how to use the
app and guiding them. FB Paper the
default global news and tutorial for
the new user.
1. It’s great for New user.

10. BLANK STATE
The second type of empty state is
the case where your customer has
voluntarily removed data from the
screen.
2. After user-cleared data

11. BLANK STATE
The third type of empty state is the
case where there’s no result in the
search. This is the of the normal
example.
3. When no result found

12. BLANK STATE
This is the of the GREAT example.
Gave user suggestion for the closest
matching result.
3. When no result found

13. 2nd State: Loading STATE

14. LOADING STATE
You should display loading screen
gave funny / useful info for user.
Use it when we doesn’t have
any choice.

15. LOADING STATE
Use skeleton frame for creating fast
loading effect for the user. So before
the image loads, user feel like you get
a preview of what the image will be.
Use it when we doesn’t have
any choice.

16. LOADING STATE
The best practice are to do front end
animation first then, call the API
process in the background. User
can do activity with cached data.
The BEST practice

17. 3rd State: Partial STATE

18. PARTIAL STATE
The partial state is when the page
are no longer empty and sparsely
populated. Your job here is to
prevent people from getting giving
up on your product.
The great opportunity for
conversion

19. PARTIAL STATE
Gave step by step information to
give feel of achievement &
completeness.
The great opportunity for
conversion

20. 4th State: Error STATE

21. ERROR STATE
Gave clear information what’s going
on ( with basic language) and gave
clear CTA for the user.
When Sh*t Happens

22. ERROR STATE
Gave user another fun activity when,
error happens. Distract them and
NEVER BLAME THE USER.
Best Practice

23. 5th State: Ideal STATE

24. IDEAL STATE
The one that we designed and
forgot the other four screen.
This is the screen that should
user see.

25. What Should we do?
In the next slide, I’ll reveal how to Designer can think beyond the ideal state.

26. Start with creating User Flow for
one activity then, create for another.
Until you cover all the possibilities.

28. Thank You
Arnold Saputra | Head UX Gramedia Digital Nusantara