share

DESIGN

5min read

UI Components: One name to rule them all

As we were telling you last week, magic happens when engineering meets design at Polidea. However, and like for every good magic spells, you will need ingredients and tools to bewitch properly your apps. In the realm of mobile tech this translate in terms of UI components. At Polidea, we like to label our components in order for the designers and developers to have a common understanding of the features each one of the buttons will have in your app. This post will lead you through the main elements that build up the interactivity of most of the mobile apps installed on your phone, and their respective common denomination.

Buttons

Button_states@1x.png

Android: Buttons are what we have come to expect from the web – they are self-contained elements or text links which can be placed pretty much anywhere you want (which doesn’t mean you should place them all over the place; just that you can).

These elements can be customized with colour, or the background can be changed entirely; you either provide an image file or specify a shape. Shadows and a ripple effect for the ‘pressed’ state are available easily from Android 5.0 up. Below 5.0 you can evenly highlight the button when pressed.

iOS: On iOS, buttons are more diverse and often differ depending on context. Small, standard actions are expressed with circular icon buttons, standalone actions with an outlined button, while actions on list have their own row.

You can customize all the types when it comes to label, colour, text colour, background and outline, separately for each state (normal, pressed, selected, disabled).

Inputs

Inputs@1x.png

Android: By default, inputs on Android are underlined and transparent; they mostly appear on solid colored backgrounds.

You can however add a 9-patch or shape background to the field itself, on top of being able to customize colours for the cursor, text, hint, the optional label and the color of error messages which appear underneath the text field. You can customize the font in the text field itself, but customizing it in the label and error message is a lot harder and may take a lot of time. You cannot by default customise the placement of the error message.

iOS: Text fields appear in two ways on iOS. When they are the core of a given interface (think composing an e-mail) they take up the whole width of the screen; subsequent fields are separated by a subtle line. When they are elements (like a login screen), they are mostly single-line fields and outlined.

You can customize the wording of the hint, font, colours of text and outline. Interestingly, there is no native support for labels or error messages; developers will have to write both from scratch. It is hard to customise the cursor.

Selectors

Android: There are three distinct selection controls here: the checkbox for multiple choices from a set, radio buttons for single choices from a set and the switch for binary on/off situations. They all can easily change colours. If you want to change anything beyond that, you will have to provide custom images for all states separately, in case of the switch all elements have to be separate assets (toggle shape, background).

iOS: Apple explicitly provides only one selection control, the switch. You can find a checkmark in some of the built in apps in iOS, but they only appear to select rows of a list. It seems that the suggested way of creating checkboxes or radios when you need them is to customise a round button with on and off states in whatever style you need.

Progress & Activity

Android: We have a variety of options at our disposal here. There are two main types of indicators in material design: linear and circular. Both come in the form of determinate and indeterminate, so the choice is really of whatever fits your interface better. Typically, linear indicators are used on cards and circular indicators are used when the whole screen is refreshing or fetching additional data.

You can customize the colour from 5.0 up. Before that, you can’t really customise anything.

iOS: Here we only have two options available out of the box: determinate (progress bar) and indeterminate (spinner). Apple suggests you use the determinate indicator wherever you can.

For both of them you can pick one of two styles (big/thick vs small/thin) and change their colours. Anything above that will require developers to write a custom control.

Alerts

alerts@1x.png

Android: Android has a good selection of components for alerts. You can go for snackbars, which appear at the bottom of the screen, when you don’t want to stop the user from what they are doing. When you need the user’s immediate attention, like when asking for permissions, use the pop up style.

Both styles can be customised with colour, text colour, custom backgrounds etc. They are pretty flexible.

iOS: On the other end of the spectrum, iOS gives one type of alert, a pop up. You have functional choices, with one, two or three buttons, bold and regular type on the buttons.

Visually, there is nothing you can do with these system alerts. It is common practice to write custom components for alerts, but it is an added effort.

Headers

headers@1x.png

Android: The header element is called the app bar here, and it is a special kind of toolbar, as it accommodates navigation and branding (in contrast to, for example, a floating search bar, which is also a toolbar).

It is extremely customisable, you can add icons, change colour, text colour, make it transparent etc. It is a primary navigation element on Android, and appears in most apps that users are familiar with, so it is not advisable to omit it entirely.

iOS: As usual, the header element on iOS, the navigation bar, is not as flexible as the Android app bar. It is used in the same context though.

You cannot change its size or location, but you can change colour, fonts, text, swap out the right hand text for system icons (like play, pause, camera, trash, search, refresh, bookmark) or add your own icon, and you can swap out the title for a logo or other image.

To conclude…

Polidea’s labelling not only discards misunderstandings when it comes to the features of each buttons, but it also gave the possibility for the designers to create the first mockup app without having to design each and every elements, yet the developer would already know the feature of each one of them and will be able to start coding. This very common denomination is a perfect example of the synergy operating between designers and engineers at Polidea. In return, this harmony drives our project toward a greater efficiency of execution and therefore more time to enhance the quality of your app. That is how magic happens…again! Stay tuned for more mobile app development wizardry…

share


MagdaUI Designer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.