 hi everyone the back can hear me from the back okay so first of all thank I said for inviting me for the today's talk like it's it's nice to speak in the first I was meet up in Singapore power so my topic is today is about like the diversity in the absolute we all building apps and but sometimes we just trying to be cool so then we forget some segments of the other user base you only focus on like a similar mindset people but that's not the way a real audience is so yeah so I'm going to talk about how to reach a more diverse user base in your apps so a little bit about myself my name is Maudhushan I'm currently working in graph as in iOS team and also focusing on accessibility at graph yeah so the outline of the talk is like first is about that how diverse the iOS user basis and how we can find out like different segments of user base and how we can cater to them and next I'm trying to focus on like some stuff that built into the iOS that supports more customization so it fits different segments of the users so if you if you compare the iOS and Android like ours has been supporting these set of features from the very beginning like accessibility and the dynamic contents and the localization these kind of things they have been supporting from the very beginning they have done a very impressive jobs in that terms yeah so I'll try doing clean is keep the implementation part like so I'm not going to have some live demo coding demo I'll put some samples in the guitar so that you guys can prefer later if you want yeah so I'll try to go this presentation very quickly so first is like so as you all know user base speak different languages so but in what we need to think is like only giving English app is never going to be enough because now the user base is more diverse than ever so you will find more shiny speaking users more like Hindi speaking users and more Arabic yeah so the idea is like you need to localize your app no excuse then abilities so abilities are different among different users like for example some users are visually impact some uses are colorblind some uses are physically disabled some uses are hearing disabled so how we can get at these set of users without apps without I mean only without only focusing on a typical user so to give you some numbers about the some disabilities around the world so if you talk about the color blindness one in 12 man is colorblind so this is like a huge number if you like so so one in 12 so you can do the math for say around 7 billion population so it's a huge number so you need to think about these people so if the point is if you use color alone represent to any kind of state that's not good not going to be enough so you need to give some additional parameter that differentiate two status rather than the color and yeah so women is yeah surprisingly we may get clear vision that meant so it's number is one 200 yeah so if there's some genetic reason behind that yeah I'm not going to explain that you can just go go and find out why this happens and then region is region and the culture so when you're using colors yeah for I mean focus your target audience and use color in a more appropriate way one example is so if you think about the Chinese culture red is some a very good like yeah so they like this red color it's a lucky color something like this so if you if you see the Apple stock the trading app like so for English users a decrease of a stock value indicated in red but if you set your localizations to Chinese so you see the increase of the stock price in red decrease in green so that means that they they're thinking about this the different cultures and use color appropriately so you should I mean you should take this stuff and next is cognitive ability so everyone is not familiar with these devices as us so we think like okay this is this feature is supposed to be figured out very easily by user but that's not the real case but they're not familiar with these devices you need to I mean you need to provide your UI in a way that's very inclusive and very intuitive yeah in for for new apps so my suggestion is like so take some apps like users are mostly familiar with for example iPhone call app it's it's kind of up that everyone is using so if you if you check that up so you can swipe I mean swipe left in a contact to delete so users know that that user interaction so then I mean if you trying to use a different thing to delete so they will they will find a hard time to figuring out so but if you use that the same US behavior that users are familiar with they will very easily figure out when you have more users like when when you are preach millions audience then then you can start customizing your apps in a your own way so it starts with something that don't don't go against the default use of areas yeah so we that some context about how diverse the user base is so is one app enough for everyone yeah probably not but can we can we build different apps for different audience we can't even if we can Apple won't want us to do that because they won't like that same app in different players appears in the app store like in different names but yeah but instead of doing that they give was worried of options to do that like so they I mean we can use many settings and many APIs to customize our one app that that can cater many audiences yeah this this is very good example so if you this is actually today's we get for the weather so if you take this is the same app and it appears this is example of four different status the first one is the default and if you compare the first one to second one second one is the iPhone settings have some settings called reduced transparency so this usually some users they don't like the transparency at all so the reason is one is can be their personal like preference and and the second thing can be some something to do with their vision capabilities they might find it hard to read content in the transparent content so if if you enable that settings this is how the same app looks in the in the second screenshot and if you check that this one so this is how the same thing so if you change your localization to a right to left language like this is Hebrew the Israeli language so the content line automatically from right to left so how you can do that so in order to do this you need to use the API properly if you use for example if you use auto layout properly you will have it for free otherwise if you if you try to implement the UI using code like without using auto layout like fix margins and fix alignments then you have to implement this from the scratch so that's that's something very important that you need to keep in mind and when you are beginning your app so if you if you decide not to go with auto layout so later when you reach a more global audience you will have to take care of these things so that's very important you keep it mine at the beginning to these kind of things yeah the the fourth one is like so you can enable some settings in the apps like it's called ball text enable so it's a system-wide setting so if you enable that all fonts that support the dynamic font in font dynamic typing well give you the ball text through art your device so this is yeah I can't read you the example so the the idea behind those four screen short is that you need to you need to support the dynamic content and the adaptive layout so adaptive layout means like so if you for example say you're you're writing universal app that works both on iPhone and Android so if you use adaptive layout properly so when when a user rotate the device and also when comes from the iPhone to iPad you are feel looks looks looks very appealing throughout the ecosystem okay so when it comes to localization so there's a very important class in the foundation library called ns formatter there are several subclasses that's inherited from this ns formatter class that that will give you these many localizations and the regional preferences UI for free so yeah so this is one example so if you use this NS date formatter which is subclass now it's not ns so with the sift 3 it's no longer next so it's date formatter so if you use this class for instance so you have two choices you can have a fixed date format like the first one is a fixed string that we can use or you can use the the API provided styles so assume that you do in the first in the first way so if you do that way this is not the result you will end up so in the Chinese localization so if you use this one these two Chinese characters will appear there so that's not the correct way I think the chance people agree so the correct way is that these the these two characters should come first in the in Chinese language so if you use this style industry so you will get that for free so always try to use these instances from inherit classes from the the format a class so this will give a lot of features like this for example currency in some languages the currency symbol comes first in some languages currency will come after the digits so if you use proper formatter classes you need you don't need to take care of them the system frameworks will take you that for free yeah so you need to do this internationalization internationalization for right and otherwise you in your code you have to you have to implement this in the as like checking the language if the language is this do this if otherwise do this okay for when it comes to language so this is very important like user can have in in the system settings one is that they can give a default language for example I I give English and also they can do a preferred language in order they prefer so this is important for apps like this will allow apps to localize in languages that that are not even available in the system language yeah for example that the preferred language list has a lot more languages than the languages available in the in the default language so this will give apps the chance to localize in many more languages and so how this works is like and also this also has a region part so these three are really important so the here user define like how he likes to see you up so we need to read these settings and give a UI that match these settings so and if the one example if I say that my preferred region in Singapore I I'm saying that the currencies in apps I would like to be in Singapore dollars like and also the date format I would like to be in a Singapore standard format so yes so in in your localization files so when you're going to localize so you have these yeah for example let's say Chinese so you have many different options like here is the main settings that here are the traditional settings so this is for the simplified and the traditional Chinese and what are these like so if this is the traditional Chinese but there are some special two characters after the language code yeah that is actually the regional code so and if you check each yeah so there's a single function as well so so when you're localizing so you first need to localize in the general language in the Chinese traditional Chinese and the simplified Chinese then if you want to have some special cases like for example if you want to have the Singapore flavored singly stuff so you can assign in this file so it will give more personal like more personalized more regionalized experience to your app like if a user specified his is his region is Singapore he will see some some like more customized stuff in the app yeah so when okay so this thing is about when it comes to localization how how to handle the plural plural and singly cases like for example I assume that you have some label that that that a sign that says the number of friends online so it can be one friend is online or two friends online so usually how we in the localization like so we have some formatted text that we can assign and assign this one or two value dynamically but how we're going to handle these things these are and this case in the plural case we need to add x-rays here so one case one way of doing this is like check the number of friends so if it's a plural assign different string and if it's singular sign a different string but you don't need to do that really because the there's a way that the upper sticky provided that we can use to handle this situation very easily yeah this in you can you can have a file called localizable string drift and in this is actually the list file so in this file so you can say that how you how it should look like for the plural singular and the plural cases so I'm saying that this is my string key the this number of friends online so this is the actual key for the string and here is how you sign variables in the playlist and here I mentioned that in the singular case this should be this and in the plural case which would be this so then it will automatically based on the number you are giving it if you do one it will use this format if you give a number more than one if you use this format so it's very important to use this file if you have such cases in your apps and it's more than that because some languages handle these various cases differently like some languages handle in case of zero it can be really different in case of few some languages can handle this case differently than others so you can use this set of keys to assign a value that that will automatically fetch based on the number and yeah so when you are localizing for right to left languages it's important to use auto layer so otherwise you have to lay out you had to recalculate your layout and do it in the cord that if the language is Hebrew or Arabic align my UI in this way otherwise this way but if you use auto layer properly you will get this for free like so when when a user set the language to right to left languages it will automatically turn around the UI and it will see in the right to left manner and when it comes to the abilities so yeah there are many features that you need to care about money's voice over so actually I covered some stuff about the voice over in my previous talk in the in the same day of start so maybe if anyone interested about supporting the voice over users like visually impaired users you can check that talk it's it should be available in the ingenious G website yeah and other things are visual accommodation these are like so enable system wide ball settings or reduced transparency or and also there's settings called radius motion so this is for like okay so here's a worry it is a very interesting use case like so if some user enable the reduced motion one thing that user can be some user that hate these animations and or maybe he wants to save the battery life from the animation or or this can be a user who suffered from epilepsy so if someone suffered from epilepsy if you give some animations with the high rate high frame rate this use it can trigger this epilepsy in a few seconds time so that's that's I mean that's something that you need to take in mind that if you have I mean worry moving animations so you need to check that settings the radio if the radio transparency enabled you you need to reduce the animation rates and maybe avoid the animation at all okay for the demo I'm not going to do some code here so I have some results screenshots from the demo app I created to showcase these stuffs so I'll show the screenshots now because the time is running and I'll share the code in the GitHub so and I'll share the link in the in the Facebook group or the meetup website yeah so he is very small demo app I created so this is how it looks like in English language and the region is Singapore the first case I'm using the fixed format today so yeah it's it's very usual so the second one is the date field I assigned from the date style not a fixed format and okay the the third row is just just I'm using some image icon in the column and the the next two I'm you as this this is the subtitle this is the title so I'm using the same string here in both locations so it's supposed to get handle this grammar correctly for me if I'm using the the correct API and the the next one is the decimal form and so this also can be different based on the language for example if you if you take the Swedish and some other languages so they use comma here instead of the dot so you need to you need to handle these situations and also for the currency some currencies use this the currency format at the beginning and sometimes it is at the end yeah so this is the how it looks like when I said the language is the simplified Chinese and the region is China so as you can see the fixed form at a date so it still use these two characters at the end but when I use that style instead it gives me that the proper localization for free so yeah that's a very cool feature and yeah the rest of the things are the same yeah so this is also the currency symbol this is not something that I'm hard-coding it I'm using the current number four matter use with the currency style it will give you the appropriate see appropriate currency symbol for free so you that's that's very easy to use these features and this is how it looks like in the Hebrew the Israeli language so here the most interesting case yeah of course it's aligned because okay the first case why you see these strings still in English because I haven't localized these things I only I mean I'm trying to demo only the subtitle case because if I if I use the proper is localized files this should be I mean they should be in the Hebrew language but here the interesting part is if you check with the previous image if you pay attention to this image yeah you can see that actually the image also flipped over so the book binding is in the left side in this image and when it goes to the right to left language it goes to the left so how you can handle these things so this is very very easy to do like so in the in the images you can give extra options that you can give two images the in the right to left languages use this image and left to right languages use this image that's it like the apple will know what's left to right language what's the right to left language and keep the right image for you and okay this is how it looks like in the Swedish so if you check here instead of George it is comma and also the car symbol goes at the end and also if you if you know about the date format so the Swedish people like so instead of the date they I think they prefer to use the 24 o'clock so instead of using MPM so it use simply 24 o'clock time format yeah so that's roughly about it like so the so here are the things that we didn't cover but important to mention that you can look out the apple has this new measurement and units API I think only I stand on words this this super cool like so you can use like energy conversions and yeah temperature conversions yeah all those are features it's a really good library to look at and also we didn't cover all aspect of accessible the accessibility is very white topic that like there are many areas that you need to think about and and yeah so it's I mean when it comes to accessibility don't don't think like so will there be enough users with visual impairment that who will use my service no do it at the service the people will allow to use the technology as us so it's it's take it as a responsibility of yours that give the same experience or almost the same experience to everyone regardless of their accessibility yeah so I have one of my colleague working yeah a few dex next to me who's visually impaired and is still a developer that yeah when I work on some stuff some feature like in our app that improved accessibility that it's really impressive that how much it allows it so yeah so you you'll never know that simple enhancement you do for in terms of accessibility will be agreed I mean great for these users so think about accessibility don't skip a yeah so the we didn't we didn't cover the power for to layout how to use that or they are propelled to support this right to left cases and also testing and auditing for internalization so you can simply yeah these things I mean WBC got great videos for these cases so these things are the stuff we didn't cover but still important to know it that you guys can check later yeah so that's it from me basically so I want to the message I want you guys to take out it's like so let's make these apps and the experience we are creating better for everyone don't focus on it on the small set of users the I mean care about this why diverse user base and do something for everyone so I want to thank okay to a Singapore power for hosting me up and also a special thanks to the engineering ST there guys are recording most of the tech videos in Singapore if you check the website it's it's it's full of very good content so I know these guys looking for volunteers I was also trying to but I couldn't find much time to do that but if anyone willing to volunteer put their first these guys like yeah feel free to contact here's the guy started it Mike yeah special thanks to these guys and yeah so I would happy to take any questions if you guys got any okay I was okay but so I haven't because if you are supporting your apps I was 8 ton words the most of the things are there but these special cases like measurement and units yeah unfortunately it's I was 10 or not so in that case yeah you had to feel that pain there's no choice like some libraries already down the guitar that cover this case for us so you can simply use them but you are almost fine if you use if you have targets I would I use a 8 ton words yeah I think you fine but most of the cases I think that's the case because in that case I think we are very lucky because if you if you check the Android user base yeah they still have to support the very old versions so I get this complaint from my wife she's doing Android yeah like so yeah so in this case we really like it because if you check the charts for the iOS adaptation I think I was 8 is it's a very good minimum version you can use yeah any more questions yeah that the image just image is just about the asset catalog so if you use these yeah so okay you mean this yeah oh it's it's something that the iOS frameworks will give you a free if you have to use the hotel a arc and I mean you have to you have to keep in mind this this that's going to be a case for the right to left language but if you align using a toilet from left to right so then you need to do you don't need to think about left right to left because it first perhaps for you yeah sorry it's console free but in case you're using a toilet but another case is like I think so when you are using a toilet you can there's a tick called the relative to margin you remember that yeah so that's also very important that some that's also something that developers skip so that that's becomes very important when you when you're writing universal apps like if you use the margin so when you open your apps in the iPad it use a very bit wider margin than the iPhone so it's very important when it comes to when when you have some long paragraph so it's it's hard for users to if you are lying if your paragraph lying length is very long it's hard for users so users prefer a bit short line length paragraph so it will give that for free if you if you take that the relative to margin tip okay any more questions image according to region how you look like a stream okay that's yeah but but okay when you're using the image like okay so assume that you are having the image in the project by itself so you there's options to look like so it's what usually if assume that there's a string file and also if you take a storyboard so when you localized it it will create a string file separate string files for the language so I haven't tried that but I think you can do the same thing for the image but you cannot do this in when you imagine that asset catalog so that's a special case that I need to check that out maybe I'll I'll try and put that in the source code in the GitHub yeah yeah so you have to localize I mean you had to have separate images if your image contains text so that's something that better to avoid because your text get I mean this I mean fix elated sometime so better to put text in the labels as much as possible yeah but if you have edge case that you had to put a text in the image yeah then you have to give a separate image for each language yeah any more questions from the audience okay if not yeah I'll wind up and finally some message for my employer like this some of my manager requested me to food here so if you are finding jobs like we are aggressively these days so feel free to go and apply yeah thank you