What are empty states? These are spaces on your app or web page which can be empty or blank. Screens or panels where no data or content displays. Why? Your users haven’t entered anything or data can’t be displayed.
You might be familiar with empty states. Some typical scenarios are:
When a search returns no results
You have downloaded a new app and haven’t entered any data or content
An error has occurred
When you have deleted all of your data
What can you do? You could leave it empty. Or display information to the user. What kind of information would you put here? You want to use this space to communicate the app’s status. Teach new users how to get started or discover new features.
Communicate status to the user
When you use an app, sometimes you may wonder if it is working. This can occur when you run a search and get no results back. Or an error has occurred.
Teach users how to get started
A blank or empty space can be intimidating to first time users. Use the space to teach your users what to do next, you help them to get started using your
Show your users how to create new content with examples. Use starter content to give them an idea on how to fill the space. If you sharing photos, you may put a couple of photos in to demonstrate how that works.
Don’t leave your users guessing what the app is doing. By using empty states, you help your users to get started using your app quickly. Learn how it works and be confident they can get what they want to do done. Refer to Designing Empty Spaces in Complex Applications to learn more.
A quiz topic. I love to eat chocolate. Chocolate is a fun quiz topic. I compiled a list of questions on chocolate.
I wanted to use FlexBox for the layout. Plus a counter that shows you what question you are on. I included a photo of chocolate as well.
Building the app
The structure for a quiz is simple. It should display a question, a list of answers and track the number of questions that you get right. Then, it shows you summary of how well you did at the end. Plus, it should give you the option to try again.
I started with a simple quiz tutorial and modified it. First, I edited the code to include my questions on chocolate. Then, I looked at a quiz example with a timer and modified my code to add question counter.
Finally, I updated the code to include the chocolate photo into the results. It required adding one line of code.
I wanted to add a sticky footer to the bottom of the web app. The web page uses FlexBox. I need to modify the layout to create the footer using FlexBox. CSS-Tricks’ FlexBox option fit well with the app design.
I wanted to use a gradient for the background. You can either use a CSS gradient generator to create it. Or use one created by designers. Gradient Hunt lets you choose from a selection of pre-made gradients.
What to do differently
A quiz on chocolate needs more photos of it. The design would need to show more chocolate as you move through the quiz. Next, I would like to show chocolate facts with each question. Each question has to have four answers; no true or false. I would change it so I can add true or false questions.
If you like chocolate and want to take a quiz, try out this Chocolate Quiz.
Every day is a bit different. You may have new priorities and problems to solve. Meetings and issues that require your attention. Developers need to focus on the code they are writing. When you stop working, it can be hard to get back into a development flow.
What is flow? Flow is described as a cognitive state where you are completely absorbed in an activity. You are intensely focusing on your chosen activity.
Returning to your work
There are times when you need to stop working. You have to go to a meeting, eat lunch or leave work for the day. When you return, it takes time to get back into state of flow. What can you do to help get back into your development flow?
1) Leave yourself note
The simplest thing you can do is leave yourself a note. You can leave a comment in your code to remind yourself what to do next. Use email or have a tool like Slack remind you of what you were working on.
2) Rule of 3
Before you leave for the day, write down three things that you want to accomplish. When you start work the next day, work on those three things. J.D. Meier explains why the rule of three is a simple way to get results.
3) Make a shutdown process
A shutdown process is a set of tasks that you do to help you finish up for the day and prepare for the next work day. Workday shutdown rituals help you to separate your work day and personal time.
What is accessibility? It is making your website as usable for as many people as possible. You want to make sure it works on different devices and slow networks. People with changing abilities due to aging, physical issues or situations.
To make your website or app usable to as many people as possible, you’ll need to use different accessiblity resources and tools.
Color is one tool that can make or break a design. Choosing the right colors can be hard. Radix Colors helps you to select colors to design beautiful and usable websites and apps.
Many web development teams use style guides or a design system. These tools help to make your website or apps consistent. A11Y Style Guide gives you tips, tools and WCAG guidelines for developing. It includes a pattern library focused on accessibility. You can use their guide as a reference for your own style guide.
You want to build things that people want to use. What do you need to know? You need to understand how people use websites and what you need to know to optimize it. The Accessibility Developer Guide explains what to look for and how to fix it. Many problems can be fixed by looking at how you write HTML.
As a developer, you need to test your code. You also want to test how use to easy your UI is as well. There are different tools to choose when you test the accessibility of your website or app. Here are a couple to start with:
Your keyboard. Many blind users navigate a website using their keyboard. Use the WebAim guide to Keyboard Accessibility.
What is technical debt?
Technical debt results when a programmer or team chooses speed over perfect code. They make decisions that focus on shipping code instead of following design considerations. Product Plan gives you an in-depth look at technical debt.
Is all technical debt bad?
No. Like financial debt, technical debt can be a necessary tool to help you achieve your goals. It becomes a problem when you haven’t managed it.
How do you manage it?
1. Treat tech debt as a tool
Every tool has its benefits and issues. When you are building new product, you need to decide how you are going to solve certain problems. You may create some technical debt while solving certain problems to get your app out the door.
2. Build it into your processes
Tech debt becomes a problem when you ignore it. To prevent it from becoming a problem, add it to your development processes. Track what debt you can and need to address and what you can live with. Document everything. Good documentation helps you understand the difference between debt, quirks and configuration needs.
3. Good testing can catch issues
Do you test all your code? Make sure you have enough testing to cover all your code.
4. Dedicate time to work on it
Plan on addressing the “bad” debt as part of your work load. If you schedule time to address it, bad tech debt won’t adversely affect the performance of your app.
5. Manage FOMO
There is always a new library, framework or programming language to learn more about. You want to limit the new things that you want to add or try out. Save the new things for a different project. Then, you won’t introduce unintended tech debt that you will have to fix.
When you write software, you’ll create technical debt. It doesn’t matter how good your processes. You can’t eliminate it. Tech debt can be managed.